javascript - 删除只出现在 DOM 检查器中的空引号

Question

在我的 contenteditable div 中，如果文本被删除(由用户)，然后立即进行一个空格(使用空格键)和任何文本，空引号出现在 DOM 检查器中的文本下方(Chrome 和 Safari，经过测试).

下面是 DOM 检查器中显示的内容:

<div id="reminderTextEditable" contenteditable="true">
" test text"
""
</div>

如果在 div 中删除了文本的前导空格，空引号仍然存在

<div id="reminderTextEditable" contenteditable="true">
"test text"
""
</div>

我尝试使用以下代码尝试使用 Javascript 定位空引号，但它总是提示“1”:

var list = document.getElementById('reminderTextEditable');
var list_items = list.childNodes;
alert(list_items.length);

无论空引号是什么(空格？)，它们似乎会导致布局问题。

如何删除导致空引号的原因？

Answer 1

如果您在编辑时按回车键，某些浏览器(如 Firefox)会添加一个
标记来实现该效果。当您按下退格键时，光标似乎会删除换行符，但不会删除
标签。它仍然在那里。其他空白字符可能会发生类似的问题。

Mozilla 有几个非常详细的示例，它们具有删除额外制表符缩进或换行的功能

https://developer.mozilla.org/en-US/docs/Rich-Text_Editing_in_Mozilla .

要自己做，您必须解析 contenteditable 元素的 innerHTML。如果节点没有 innerHTML(或者是没有 nodeValue 的文本节点)，则将其删除。然后遍历 BR 标签，如果标签是 BR 并且没有 nextSibling，则将其删除。