Contenteditable 不能与设置为 false 的 contententeditable span 一起使用

Question

我在 jsfiddle 中复制的 contenteditable div 存在问题。问题是当我在 contenteditable div 之间单击并按退格键时，div 内的所有 span 标签都被删除。我在小提琴中尝试了同样的方法，但它工作正常。但是当我将光标放在末尾时，它会一一删除跨度。

这行得通

<div contenteditable="true">
<span contenteditable="false">value1</span>
<span contenteditable="false">value2</span>
<span contenteditable="false">value3</span>
<span contenteditable="false">value4</span>
<span contenteditable="false">value5</span>
<span contenteditable="false">value6</span>
</div>
<br/>

这不是

<div contenteditable="true" id="formulaBox"  role="button" tabindex="0">
<span style="color: red;" contenteditable="false">SUM</span>
<span style="color: black;" contenteditable="false">(</span>
<span style="color: rgb(0, 126, 255);" contenteditable="false">value1</span><span style="color: black;" contenteditable="false">+</span>
<span style="color: rgb(0, 126, 255);" contenteditable="false">value2</span><span style="color: black;" contenteditable="false">+</span>
<span style="color: rgb(0, 126, 255);" contenteditable="false">value3</span><span style="color: black;" contenteditable="false">*</span>
<span style="color: rgb(0, 126, 255);" contenteditable="false">value4</span><span style="color: black;" contenteditable="false">)</span>
<span style="color: black;" contenteditable="false">/</span>
<span style="color: blue;" contenteditable="false">AVG</span>
<span style="color: black;" contenteditable="false">(</span>
<span style="color: rgb(0, 126, 255);" contenteditable="false">value5</span><span style="color: black;" contenteditable="false">)</span>
</div>

参考以下链接 https://jsfiddle.net/9ruwpyv5/

第一个 div 被复制，第二个是实际代码。

Answer 1

我找到了。我只是在所有 span 标签之间添加了一个空格，它解决了这个问题。

$('#formulaBox span').before(" ");