我如何使div元素可编辑（如点击它时，就像一个textarea）？
这是我的代码：
<!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> 谢谢
让我们通过它。
你不能让一个div可编辑。 至less在现在，没有可编辑的div这样的东西。 所以问题是找出用什么来编辑。 一个textarea完美的作品。 所以这个想法是以某种方式得到一个文本区域的div当前位于。
问题是我们如何以及从哪里得到textarea。 有不同的方法，但其中之一就是dynamic创build一个textarea：
var editableText = $("<textarea />");
并用divreplace它：
$("#myDiv").replaceWith(editableText);
textarea现在已经到位了。 但它是空的，我们刚刚取代了div，失去了一切。 所以我们需要以某种方式保存div的文本。 一种方法是在replace之前复制div中的text / html：
var divHtml = $("#myDiv").html(); // or text(), whatever suits.
一旦我们有div的html，我们可以填充textarea，并安全地用textareareplacediv。 并在用户可能想要开始编辑textarea内设置焦点。 结合所有的工作到这一点，我们得到：
// 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();
它是function性的，但是当用户点击div时没有发生，因为我们没有设置任何事件。 让我们连接事件。 当用户点击任何div $("div").click(..) ，我们创build一个点击处理程序，并完成以上所有操作。
$("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事件。 这可以用来检测用户何时离开textarea，并将divreplace回来。 我们这次做的确是相反的 保留textarea的值，创build一个dynamicdiv，设置html，并replace掉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将不再转换成点击textarea。 这是一个新创build的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); }
将所有东西连接在一起，我们有2个函数， divClicked ， editableTextBlurred ，下面的行触发一切：
$("div").click(divClicked);
在http://jsfiddle.net/GeJkU/检出这段代码。; 这不是以任何方式编写可编辑div的最佳方式，而是一步一步地开始和接近解决scheme的方法。 老实说，我和你们一样，在写这篇长篇文章的时候学到了很多东西。 注销，adios！
对于一个div ，你可以使用这个HTML属性使其可编辑：
<div contenteditable="true">Anything inside this div will be editable!</div>
更多信息在这里： http : //html5demos.com/contenteditable
希望这可以帮助。
使用contenteditable="true"属性的部门。
基于Anurag的答案，我写了一个小的jquery插件：
https://github.com/zevero/jquery-html-editable
它允许你编辑所有'div.myDiv'元素：
$('body').html_editable('div.myDiv');
对于那些寻找一个on()版本，这是基于Anurag的答案。
如果出于某种原因，您希望从可编辑文本input中取消点击事件（例如查看可编辑和不可编辑的内容版本），您可以稍后应用$(document).off("click", ".editable_text"); 。
$(document).on("click", ".editable_text", function() { var original_text = $(this).text(); var new_input = $("<input class=\"text_editor\"/>"); new_input.val(original_text); $(this).replaceWith(new_input); new_input.focus(); }); $(document).on("blur", ".text_editor", function() { var new_input = $(this).val(); var updated_text = $("<span class=\"editable_text\">"); updated_text.text(new_input); $(this).replaceWith(updated_text); });
.text_editor { border: none; background: #ddd; color: #000; font-size: 14px; font-family: arial; width: 200px; cursor: text; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p><span class="editable_text">Here is my original text.</span> </p>
contenteditable有一些严重的缺陷。 在我看来最让人dam，的，就是跨浏览器的不兼容性对Enter的使用。 看到这篇文章的描述。 在Firefox中，单击Enter键为回车创build一个新的段落，有效地将每行的间距加倍，但不够长。 十分难看。
