监视HTML textarea元素中的更改

Question

不幸的是,<textarea>的"change"事件仅在元素失去焦点时触发.

当它的内容实际发生变化时,我想发出一个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,你可以看看我的插件处理差异并规范事件尽可能多尽可能用于Internet Explorer和旧版浏览器.这会使你的代码看起来像这样:

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

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

nb:值得一提的是,oninput如果值没有改变则不会触发,例如,如果您突出显示一段文本并将相同的选项复制/粘贴到顶部以使文本保持不变.