Question

这是我的代码：

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

由于

Answer 1

让我们通过它。

你不能使div可编辑。至少就目前而言，没有可编辑的div这样的东西。所以问题是要找出用于编辑的内容。 textarea完美无缺。所以我的想法是以某种方式得到div当前所在的textarea。

问题是我们如何以及从哪里获得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并用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不会再点击转换为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);
}

将所有内容连接在一起，我们有两个功能divClicked，editableTextBlurred，下面一行会触发所有内容：

$("div").click(divClicked);

在http://jsfiddle.net/GeJkU/查看此代码。这不是以任何方式编写可编辑div的最佳方法，而只是逐步启动和处理解决方案的一种方法。老实说，我在写这篇长篇文章时和你一样学到了很多东西。注销，adios！

Answer 2

要使<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

Answer 3

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

Answer 4

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

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

允许您制作所有＆＃39; div.myDiv＆＃39;元素可编辑：

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

Answer 5

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

如果由于某种原因，您想要从可编辑文本输入中删除点击事件（例如，查看可编辑和不可编辑的内容版本），您可以稍后应用$(document).off("click", ".editable_text");。

＆＃13;

$(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);
});

＆＃13;

.text_editor {
  border: none;
  background: #ddd;
  color: #000;
  font-size: 14px;
  font-family: arial;
  width: 200px;
  cursor: text;
}

＆＃13;

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

＆＃13;

Answer 6

contenteditable有一些严重的缺陷。在我看来，最诅咒的是在使用上跨浏览器不兼容。有关说明，请参阅此article。在Firefox中，单击Enter以进行回车创建一个新段落，有效地将每个行的双倍间距设置为不足以换行。非常难看。

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

Answer 8

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

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

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

如何使div元素可编辑（当我点击它时就像textarea一样）？

8 个答案: