如何防止在 contenteditable 元素中创建不间断空格？

Question

我有一个 contenteditable div，它会在删除或添加单词时创建许多不间断的空格。 这是我的代码格式：

<div id="div" contenteditable="true">
    <span>Hello</span>
    <span></span>
</div>

我试过替换输入中的不间断空格：

document.getElementById("div").oninput = function() {
     document.getElementById("div").innerHTML.replace(" ","");
}

但这不起作用。 有任何想法吗？

Answer 1

您需要将innerHTML分配给更改后的文本，如下所示：

document.getElementById("div").oninput = function() {
  document.getElementById("div").innerHTML = document.getElementById("div").innerHTML.replace(" ","");
}

因为如此MDN页面所示：

原始字符串保持不变

因此，您需要将replace结果分配给某些内容。

Answer 2

另一种完全没有任何 JavaScript 的解决方案：只需添加white-space: pre-wrap; 或white-space: break-spaces; 到您的内容可编辑元素的 styles...瞧，没有更多  :)

Answer 3

您已使用getElementById() ，而在HTM L代码中未使用任何id时，除了上述答案提到的innerHTML问题