删除仅出现在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找到空引号，但它总是警告＆＃34; 1＆＃34;：

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

无论空引号是什么（空白？），它们似乎都会导致布局问题。

如何删除导致空引号的内容？

Answer 1

如果您在编辑时按Enter键，某些浏览器（如Firefox）会添加一个标签来实现此效果。当您按下退格键时，光标似乎会删除换行符，但它不会删除
标记。它仍然存在。其他空格字符也会出现类似的问题。

Mozilla有几个非常详细的示例，其中包含删除额外制表符缩进或新行的功能

http://ideone.com/JcAaxd

要自己动手，你必须解析contenteditable元素的innerHTML。如果节点没有innerHTML（或者是没有nodeValue的文本节点），请将其删除。然后浏览BR标签，如果标签是BR并且没有nextSibling则将其删除。

Answer 2

也许你最好的选择是调整你的布局，以便它不会受到这个问题的影响，无论是通过CSS还是JS，如果复杂性需要它。