如何使 HTML <div> 元素可跨浏览器编辑？答案

【问题标题】：How to make an HTML <div> element editable cross-browser?如何使 HTML <div> 元素可跨浏览器编辑？
【发布时间】：2010-11-14 09:16:11
【问题描述】：

您知道如何使用 JavaScript 使 <div> 可编辑吗？我正在寻找跨浏览器的解决方案。

类似于富文本区域，但使用可编辑的<iframe>。对于<div>，我需要类似的东西。
我不想使用替换文本框。

【问题讨论】：

【解决方案1】：

将元素的contentEditable属性设置为"true"：

element.contentEditable = "true";

另见：

【讨论】：

【解决方案2】：

你可以在纯 HTML 中做到这一点

<div class="editable" contenteditable="true">
    Editable text...
</div>

希望这会有所帮助！

【讨论】：

OP 想用 JavaScript 做到这一点。
@Gothdo 其实就是这样做的，不需要 JS。使用接受的答案，您必须在 div 上单击两次才能第一次对其进行编辑。此处的 div 显示为普通 div，直到您单击它变成可编辑的位置。

【解决方案3】：

我知道了。

你使用 DOMElement 的 contentEditable 属性，就像这样

<div onClick="this.contentEditable='true';">
    lorem ipsum dolor lorem ipsum dolorlorem ipsum dolor
</div>

【讨论】：

是的，我的朋友，它确实可以在 Internet Explorer 6 中使用！这是有关此主题的更多信息以及在旧版本的 Internet Explorer 中使用它的风险。 stackoverflow.com/questions/491790/… 谢谢。
为什么不只设置属性contenteditable=true，而不设置onClick？或者在回答这个问题时，IE 是否/不支持这一点？
它实际上是 HTMLElement 的属性。见：developer.mozilla.org/en-US/docs/Web/API/HTMLElement/…

【解决方案4】：

How about his:

制作一个隐藏的 "textArea" ，并在选择（单击或悬停） div 时，隐藏 Div 并显示 textArea 。

【讨论】：