监视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不会触发，例如，如果突出显示一段文本并在顶部复制/粘贴相同的选择，以便文本保持不变。

Answer 2

您应该从jquery检查keypress属性。

(function($) {
    $(document).ready(function() {
        $("#editor").keypress(function() {
            alert('Handler for .keypress() called.');
        });
    });
})(jQuery);