Question

不幸的是，＆lt; textarea＆gt;的“更改”事件只有当元素失去焦点时才会触发。

当它的内容实际发生变化时，我想发出一个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");
  }
 });

有没有更好的方法来确定何时＆lt; textarea＆gt;的内容更改？

Answer 1

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

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

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

工作演示：my plugin

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

Answer 2

您应该从jquery检查keypress属性。

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

监视HTML textarea元素中的更改

2 个答案: