如何使 div 元素可编辑（例如单击时的文本区域）？答案

【问题标题】：How do I make a div element editable (like a textarea when I click it)?如何使 div 元素可编辑（例如单击时的文本区域）？
【发布时间】：2011-01-27 08:19:49
【问题描述】：

这是我的代码：

<!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>

谢谢

【问题讨论】：

标签： javascript jquery

【解决方案1】：

让我们解决它。

您不能使 div 可编辑。至少现在没有可编辑的 div 这样的东西。所以问题是找出用什么来代替编辑。文本区域完美运行。所以这个想法是以某种方式获得 div 当前所在的 textarea。

问题是我们如何以及从哪里获得 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 并安全地将 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 时没有任何反应，因为我们没有设置任何事件。让我们把事件联系起来。当用户点击任何 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 在点击时将不再转换为文本区域。这是一个新创建的 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 的最佳方式，而只是逐步开始和解决解决方案的一种方式。老实说，在写这篇长篇文章时，我和你学到的一样多。签字，再见！

【讨论】：

此线程中列出了各种其他现有的 jQuery 就地编辑器插件 - stackoverflow.com/questions/708801/…。 Editable 和 Jeditable 就像 Sarfaraz 已经提到的那样是一些不错的，但我不知道就地编辑与星球大战有什么关系：D
contenteditable="true" 确实允许此功能。 IE 从 5.5 开始支持，HTML5 对此提供了支持
为什么我们需要遵循所有这些？我们不能使用属性 contenteditable="true" 使 div 可编辑吗？我用过很多次，从来没有遇到过任何问题。
解释清楚！！谢谢！！
我根据你的想法做了一个 jquery 插件：jquery-html-editable

【解决方案2】：

使用contenteditable="true" 属性进行划分。

【讨论】：

【解决方案3】：

要使<div>（或与此相关的任何元素）可编辑，您可以使用contenteditable HTML 属性。

例如：

&lt;div contenteditable="true"&gt;Anything inside this div will be editable!&lt;/div&gt;

【讨论】：

在 contenteditable="true" 时，对于变为非活动的链接，该 div 的行为不再像普通 div。
链接保持活跃的方法如下：stackoverflow.com/questions/12059211/…

【解决方案4】：

contenteditable 有一些严重的缺陷。在我看来，最糟糕的是，Enter 使用时跨浏览器不兼容。有关说明，请参阅此 article。在 Firefox 中，单击 Enter 进行回车会创建一个新段落，有效地将每一行的间距加倍，因为它不够长而无法换行。很丑。

【讨论】：

这不能回答 OP 的问题。这应该是一条评论。

【解决方案5】：

根据 Anurag 的回答，我写了一个小的 jquery 插件：

https://github.com/zevero/jquery-html-editable

允许您使所有 'div.myDiv' 元素可编辑：

$('body').html_editable('div.myDiv');

【讨论】：

【解决方案6】：

对于那些寻找on() 版本的人，这是基于 Anurag 的回答。

如果出于某种原因，您想取消可编辑文本输入的点击事件（例如，查看可编辑和不可编辑版本的内容），您可以稍后应用$(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>

【讨论】：

【解决方案7】：

你可以试试这个

 <!DOCTYPE html>
    <html>
    <body>

    <div id="myP">This is a paragraph. Click the button to make me editable.</div>

    <button onclick="myFunction()">Try it</button>

    <p id="demo"></p>

    <script>
    function myFunction() {
        document.getElementById("myP").contentEditable = true;
        document.getElementById("demo").innerHTML = "The p element above is now editable. Try to change its text.";
    }
    </script>

    </body>
    </html>

【讨论】：

【解决方案8】：

这是一个简单的解决方案：

$('div').click(function(e){
    this.contentEditable = 'true';
});

https://jsfiddle.net/pgdqhacj/2/ 的工作示例。唯一的缺点是你必须双击来编辑文本，而不是单击。

【讨论】：