DOM操作后TextContent的长度不变

Question

DOM操作后，我在Firefox中看到奇怪的行为。 更改TextNode的内容不会覆盖其属性。 例如，删除字符不会更新textContent的长度。

这是HTML

<p>Input:</p>
<div> <span id="cursor"></span></div>
<p>Results:</p>
<ul id="result"></ul>

还有JavaScript

var cursor = document.getElementById("cursor"),
    result = document.getElementById("result");

window.addEventListener('keydown', function(e) {
  //Backspace event
  if (e.which == 8) {
    cursor.previousSibling.textContent = cursor.previousSibling.textContent.substring(0, cursor.previousSibling.textContent.length - 1);
  }
}, true);

//Capture key press and write character to TextNode
window.addEventListener('keypress', function(e) {
  cursor.previousSibling.textContent = cursor.previousSibling.textContent + String.fromCharCode(e.which);
}, true);

在http://jsfiddle.net/dx7Dy/9/上测试此代码

在Chrome浏览器中，它可以按预期工作，当您键入div时，它会填充字母。 退格键删除最后一个字符。

在Firefox中，第一个退格键之后的最后一个字符被删除，但TextNode的textContent长度未更新。

删除TextNode时，我遇到了相同的问题（ node.remove（）和parentNode.removeChild（node） ）。 它的内容为空，但是该节点保留在DOM中，因此下一个remove（）只是尝试删除相同的空节点，将其保留为空并再次放置在适当的位置。

这仅在通过事件侦听器触发时发生。 例如，如果我通过Firebug控制台操作DOM，那么一切都会按预期进行。

这是Firefox代码中的错误吗？

Answer 1

代码中的错误，是在调整JSFiddle时发现的。 两个听众正在互动。

按下Backspace键时，Chrome不会触发按键事件。 Firefox确实如此。

看到它发生在这里http://jsfiddle.net/dx7Dy/11/我向两个侦听器添加了日志代码。

result.insertAdjacentHTML("beforeend", "<li>"+cursor.previousSibling.textContent + " " + cursor.previousSibling.textContent.length + "</li>");