Question

在contenteditable element中，我有两种类型的儿童 - span和常规文字。

<div contenteditable="true">I am first. <span class="tag">Mark me and delete me.</span> I am last.</div>

.tag {
    background-color: lightblue;
    margin-left: 5px;
    margin-right: 5px;
}

如果我选择一个范围的文本内容（在上面的示例中为Mark me and delete me.）并将其删除（按退格键或del），该元素将从该可疑父项中消失：

<div contenteditable="true">I am first. &nbsp;I am last.</div>

但是，当我再次输入任何字符时 - 会重新创建span元素。更奇怪的是 - 跨度的一些样式被保留，即使它们来自类定义：

<div contenteditable="true">I am first. <span style="background-color: rgb(173, 216, 230);">a</span>&nbsp;I am last.</div>

是否可以防止重新插入已删除的元素？

到目前为止，我唯一的想法是在每个keyup事件后重新解析contenteditable并替换有缺陷的新元素。但是，这显然效率低下。

我认为此问题仅出现在Chrome中，我无法在Firefox中重现它。 Here is a jsfiddle with the example above

contenteditable重新创建已删除的子元素

0 个答案: