Javascript 如何使div元素可编辑（如单击时的textarea）？_Javascript_Jquery

Javascript 如何使div元素可编辑（如单击时的textarea）？

javascript jquery

Javascript 如何使div元素可编辑（如单击时的textarea）？,javascript,jquery,Javascript,Jquery,这是我的代码： <!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"> </he

这是我的代码：

<!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可编辑。至少目前还没有可编辑的div。因此，问题在于找出用什么来代替编辑。文本区工作得很好。因此，我们的想法是以某种方式获得一个div当前所在的文本区域

问题是我们如何以及从哪里获得文本区域。有多种方法，但其中之一是动态创建textarea：

var editableText = $("<textarea />");

文本区域现在已就位。但它是空的，我们刚刚更换了div，失去了一切。因此，我们需要以某种方式保留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。表单控件有一个

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

因为整个操作是双向可逆的，所以我们需要对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);
}

请在签出此代码。这并不是以任何方式编写可编辑div的最佳方法，而只是一种逐步开始和接近解决方案的方法。老实说，在写这篇长篇文章时，我学到了和你一样多的东西。签字了，再见

使用部门的

contenteditable=“true”

属性。

要使

（或任何相关元素）可编辑，可以使用

contenteditable

HTML属性

例如：

此div中的任何内容都将是可编辑的contenteditable
有一些严重缺陷。在我看来，最糟糕的是跨浏览器的不兼容性。有关说明，请参见此。在Firefox中，单击回车键创建一个新段落，实际上是将不够长的每一行间距加倍。非常难看。
根据Anurag的回答，我编写了一个小型jquery插件：

允许您使所有“div.myDiv”元素可编辑：
$('body').html_editable('div.myDiv');

对于那些寻找（）上的版本的人来说，这是基于Anurag的答案
如果出于某种原因，您希望取消可编辑文本输入中的单击事件（例如用于查看内容的可编辑和不可编辑版本），您可以稍后应用$（document）.off（“单击“，”.editable_text”）

$（document）.on（“单击“，”.editable_text”，函数（）{
var original_text=$（this）.text（）；
var new_input=$（“”）；
新的输入值（原始文本）；
$（此）.replaceWith（新输入）；
新建_input.focus（）；
});
$（文档）.on（“模糊”，“文本编辑器”，函数（））{
var new_input=$（this.val（）；
var-updated_text=$（“”）；
更新的文本（新的输入）；
$（此）.替换为（更新的\u文本）；
});
.text\u编辑器{
边界：无；
背景：ddd；
颜色：#000；
字体大小：14px；
字体系列：arial；
宽度：200px；
光标：文本；
}

这是我的原文。
你能试试这个吗
 <!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>


这是一段。单击按钮使我可编辑。
试试看

函数myFunction（）{
document.getElementById（“myP”）.contentEditable=true；
document.getElementById（“demo”）.innerHTML=“上面的p元素现在是可编辑的。请尝试更改其文本。”；
}
这里有一个简单的解决方案：
$('div').click(function(e){
    this.contentEditable = 'true';
});

工作实例。唯一的缺点是，您必须双击来编辑文本，而不是单击。
此线程中列出了其他各种jQuery内置编辑器插件-Editable
和Jeditable是一些不错的方法，但我不知道现在的编辑与《星球大战》有什么关系：Dcontenteditable=“true”确实允许这种功能。IE从5.5开始就支持，HTML5为此提供了支持，为什么我们需要遵循所有这些？我们不能使用属性contenteditable=“true”使div可编辑吗。我用过很多次，从来没有遇到过任何问题。解释得很好！！非常感谢。我根据您的想法制作了一个jquery插件：当contenteditable=“true”对处于非活动状态的链接执行操作时，div不再像普通div那样工作。让链接保持活动状态的方法如下所示：这并不能回答OP的问题。这应该是一个评论。
$("div").click(divClicked);

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

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

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