如何使div元素可编辑(就像我单击它时的文本区域)？
这是我的代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no">
</head>
<body>
<style type="text/css" media="screen">
</style>
<!--<div id="map_canvas" style="width: 500px; height: 300px;background:blue;"></div>-->
<div class=b style="width: 200px; height: 200px;background:pink;position:absolute;left:500px;top:100px;"></div>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script src="jquery-ui-1.8rc3.custom.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
</script>
</body>
</html>谢谢
回答 8
Stack Overflow用户
发布于 2010-03-14 17:13:35
让我们一起来解决这个问题。
您不能将div设置为可编辑。至少目前还没有可编辑的div这样的东西。因此，问题是找出用什么来代替编辑。一个textarea可以完美地工作。因此，我们的想法是以某种方式在div当前所在的位置获得一个文本区域。
问题是我们如何以及从哪里获得文本区。有很多种方法，但其中之一是动态创建一个文本区域：
var editableText = $("<textarea />");并将其替换为div：
$("#myDiv").replaceWith(editableText);文本区域现在已经就位了。但是它是空的，我们刚刚替换了div，失去了一切。所以我们需要以某种方式保存div的文本。一种方法是在替换之前复制div中的text/html：
var divHtml = $("#myDiv").html(); // or text(), whatever suits.一旦我们有了来自div的html，我们就可以填充textarea，并安全地用textarea替换div。并将焦点设置在文本区内，因为用户可能想要开始编辑。将到目前为止的所有工作结合起来，我们得到：
// save the html within the div
var divHtml = $("#myDiv").html();
// create a dynamic textarea
var editableText = $("<textarea />");
// fill the textarea with the div's text
editableText.val(divHtml);
// replace the div with the textarea
$("#myDiv").replaceWith(editableText);
// editableText.focus();它是有效的，但当用户单击div时不会发生任何事情，因为我们没有设置任何事件。让我们把事件连线起来。当用户单击任何div $("div").click(..)时，我们将创建一个单击处理程序，并执行上述所有操作。
$("div").click(function() {
var divHtml = $(this).html(); // notice "this" instead of a specific #myDiv
var editableText = $("<textarea />");
editableText.val(divHtml);
$(this).replaceWith(editableText);
editableText.focus();
});这很好，但是当用户单击或离开文本区域时，我们需要一种方法来恢复div。表单控件有一个blur事件，该事件在用户离开控件时触发。它可以用来检测用户何时离开文本区域，并替换回div。这次我们做的正好相反。保留textarea的值，创建一个动态div，将其设置为html，并替换掉textarea。
$(editableText).blur(function() {
// Preserve the value of textarea
var html = $(this).val();
// create a dynamic div
var viewableText = $("<div>");
// set it's html
viewableText.html(html);
// replace out the textarea
$(this).replaceWith(viewableText);
});一切都很好，除了这个新的div不再会在单击时转换为文本区域。这是一个新创建的div，我们必须再次设置click事件。我们已经有了完整的代码，但比重复两次要好，最好是用它做一个函数。
function divClicked() {
var divHtml = $(this).html();
var editableText = $("<textarea />");
editableText.val(divHtml);
$(this).replaceWith(editableText);
editableText.focus();
// setup the blur event for this new textarea
editableText.blur(editableTextBlurred);
}由于整个操作是双向可逆的，因此我们需要对textarea执行相同的操作。让我们把它也转换成一个函数。
function editableTextBlurred() {
var html = $(this).val();
var viewableText = $("<div>");
viewableText.html(html);
$(this).replaceWith(viewableText);
// setup the click event for this new div
$(viewableText).click(divClicked);
}将所有东西连接在一起，我们有两个函数，divClicked，editableTextBlurred，下面这行代码触发了所有东西：
$("div").click(divClicked);在http://jsfiddle.net/GeJkU/上签出这段代码。无论如何，这都不是编写可编辑div的最佳方式，而只是一种开始并逐步接近解决方案的方法。老实说，我在写这篇长文的过程中学到了和你一样多的东西。结束了，再见！
Stack Overflow用户
发布于 2010-11-15 05:52:13
要使<div> (或任何元素)可编辑，可以使用contenteditable HTML属性。
例如：
<div contenteditable="true">Anything inside this div will be editable!</div>
更多信息请点击此处：https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable
Stack Overflow用户
发布于 2010-09-27 09:27:01
对分区使用contenteditable="true"属性。
https://stackoverflow.com/questions/2441565
复制相似问题