非常奇怪的textarea错误

Question

我的上一个问题是关于 contenteditable 元素的相同崩溃 (之前的问题)。 接下来，我发现在文本区域中也会发生相同的事情。 在我的示例 (JSBin) 中，您只需要模拟这种情况：在文本区域中输入2行文字，然后将光标移动到文本中间的某个位置，随后按 Enter 键，页面就会崩溃。 看起来像是导致页面崩溃的事件组合。此崩溃不仅仅出现在 JSBin、fiddle 等网站，而是普遍存在。

JSBin

HTML:

<textarea id="textarea"></textarea>

JS:

console.log("ready");
var textarea = document.getElementById("textarea"), overflowOnce = true;/* , savedText; */

console.log(textarea);

textarea.addEventListener("overflowchanged", function() {
  if (overflowOnce) {
    console.log("overflowchanged");
    /* console.log("savedText " + savedText); */
    /* console.log("current text: " + textarea.value);*/
    textarea.value = "blabla"; 
    overflowOnce = false;
  }
  else if (!overflowOnce) overflowOnce = true;
}, false);


textarea.onkeypress = function (e) {
  console.log("press " + String.fromCharCode(e.keyCode));
  /* savedText = textarea.value;
  console.log(savedText); */
};

- Vadim Kalinin

---

这个对我来说在Firefox和Chrome中也完全正常工作。你所说的“崩溃”是什么意思？ - Pointy

这个问题发生在我身上。添加两行文本（使用回车键换行），点击刚创建的文本中的任意位置，再次按下回车键。页面应该会崩溃（至少在Chrome浏览器中是这样）。 - Zach Saucier

话虽如此，去掉js就可以避免崩溃，因此这是一个js的问题。 - Zach Saucier

我一直在文本区域中点击和输入，没有发生任何奇怪的事情。(我在Linux上使用Chrome 29.0.1547.62。) 编辑 - 哦，等等，它刚刚发生了。我会记录一个错误，因为这显然是个bug。 - Pointy

Answer 1

我不知道为什么，但是如果你将 textarea.value = "blabla"; 更改为 setTimeout(function(){textarea.value = "blabla";},1); ，崩溃就会停止。

- Felipe Miosso

---

同样的解决方案顺便提一下，大多数 Ajax 表单都适用（我的意思是，在加载内容后准确访问它们会遇到麻烦，仅使用 setTimeout 可以帮助解决，所以可能是相同的问题）。 - vladkras

谢谢。是的，它解决了这个问题。如果有人能解释一下底层发生了什么就太棒了。 - Vadim Kalinin

在我看来，由于这么简单的东西导致整个页面崩溃，这只是Chrome（或WebKit或其他）中的运行时错误。Firefox没有问题，代码也没有明显的问题。 - Pointy

有趣的是，在Firefox中，溢出事件只会触发一次。然后我就无法再次触发它了。 - Vadim Kalinin