让我们解决它。
您不能使 div 可编辑。至少目前没有可编辑的 div 之类的东西。所以问题是找出用于编辑的内容。一个 textarea 完美地工作。所以这个想法是以某种方式获得一个 div 当前所在的文本区域。
问题是我们如何以及从哪里获得 textarea。有多种方法，但其中一种方法是动态创建一个文本区域：
var editableText = $("<textarea />");
并将其替换为 div：
$("#myDiv").replaceWith(editableText);
textarea 现在就位。但它是空的，我们刚刚替换了 div 并失去了一切。所以我们需要以某种方式保留 div 的文本。一种方法是在替换之前复制 div 中的 text/html：
var divHtml = $("#myDiv").html(); // or text(), whatever suits.
一旦我们从 div 中获得了 html，我们就可以填充 textarea 并安全地用 textarea 替换 div。并在 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();
它是有功能的，但是当用户单击 div 时没有任何react，因为我们没有设置任何事件。让我们把事件联系起来。当用户单击任何 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();
});
这很好，但我们想要一种在用户点击或离开 textarea 时恢复我们的 div 的方法。blur当用户离开控件时会触发表单控件的事件。这可用于检测用户何时离开 textarea，并替换回 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 将不再在点击时转换为 textarea。这是一个新创建的 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 的最佳方式，而只是一种开始并逐步解决解决方案的方式。老实说，在写这篇长篇文章时，我和你学到的一样多。注销，再见！