Question

在具有contenteditable =“true”的div中，如果我使用Ctrl-A选择所有文本然后键入内容，它将删除div中的所有子元素，而不仅仅是文本。

例如：

<div id="texteditor" contenteditable="true">
   CTRL-A and Edit Me.

   <div id="topleft-ornament" class="ornament"></div>
   <div id="topright-ornament" class="ornament"></div>
   <div id="bottomleft-ornament" class="ornament"></div>
   <div id="bottomright-ornament" class="ornament"></div>
</div>

小提琴： http://jsfiddle.net/7jV4f/1/

如果使用Ctrl-A编辑文本，则上面示例中的红色圆圈（contenteditable div的子元素）将被删除。

任何想法如何预防？

thx：D

Answer 1

所以将文本包装在div中并将contenteditable属性赋给该特定元素

Demo

<div contenteditable="true">CTRL-A and Edit Me.</div>
<!-- Wrap the text, don't use contenteditable for the parent element -->

Answer 2

对于代码标签，您可以设置样式“显示：块”：

<pre style="display: block"></pre>

使用Ctrl-A（全选）编辑可信文本，删除所有子元素

2 个答案: