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中填充了字母。 Backspace删除最后一个字符。

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

我在删除TextNode时遇到了同样的问题（ node.remove（）和 parentNode.removeChild（节点））。它的内容被清空，但是节点仍然在DOM中，所以下一个remove（）只是尝试删除相同的空节点，将其留空并再次就位。

仅当通过事件侦听器触发时才会发生这种情况。例如，如果我通过Firebug控制台操作DOM，一切都按预期工作。

这是Firefox代码中的错误吗？

Answer 1

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

按下退格键时，Chrome不会触发按键事件。 Firefox确实。

在此处查看它http://jsfiddle.net/dx7Dy/11/我将日志代码添加到两个侦听器。

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

DOM操作后TextContent长度不会改变

1 个答案: