javascript - 监控 HTML textarea 元素的变化

Question

不幸的是，<textarea> 的“更改”事件仅在元素失去焦点时触发。

我想在它的内容实际发生变化时触发一个 alert()，而元素仍然是焦点。

这是我得到的:

var $editor = $("#editor")
 .keydown(function () {
  $editor.data("before-keydown", $editor.val());
 })
 .keyup(function () {
  if ($editor.data("before-keydown") !== $editor.val()) {
   alert("content has changed");
  }
 });

有没有更好的方法来确定 <textarea> 的内容何时更改？

Answer 1

您应该使用 HTML5 oninput 事件，它胜过捕获文本输入的关键事件，并且大多数浏览器已经支持它一段时间了。 Internet Explorer 除外，尽管它位于最新的 Internet Explorer 9 预览版中。 Internet Explorer 可以模拟此事件，但是，使用它自己的专有事件 onpropertychange，每次 value 属性更改时都会触发该事件。

oninput 将为所有形式的输入触发，例如剪切、粘贴、拼写自动更正、拖放等。由于您使用的是 jQuery，因此您可以查看 my plugin它处理差异并尽可能为 Internet Explorer 和旧版浏览器规范化事件。这将使您的代码看起来像这样:

var $editor = $("#editor").input(function() {
    alert("content has changed");
});

工作演示:http://jsfiddle.net/9YcPu/

nb:还值得一提的是，如果值没有改变，oninput 不会触发，例如，如果您突出显示一段文本并将相同的选择复制/粘贴到顶部，那么文本保持不变。