使用 JQuery 检测对 <input type="text"> 的所有更改（立即）

Question

<input type="text"> 的值可以通过多种方式更改，包括：

• 按键

• 复制粘贴

• 用 JavaScript 修改

• 由浏览器或工具栏自动完成

我希望我的 JavaScript 函数在任何时候被调用（使用当前输入值）。而且我希望它立即被调用，而不仅仅是在输入失去焦点时。

我正在寻找在所有浏览器中执行此操作的最简洁和最强大的方法（最好使用 jQuery）。

原文由 Dustin Boswell 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

不幸的是，我认为 setInterval 赢得了奖项：

 <input type=text id=input_id />
 <script>
 setInterval(function() { ObserveInputValue($('#input_id').val()); }, 100);
 </script>

这是最简洁的解决方案，只需 1 行代码。它也是最强大的，因为您不必担心 input 可以获得值的所有不同事件/方式。

在这种情况下，使用 ‘setInterval’ 的缺点似乎并不适用：

• 100毫秒的延迟？ 对于许多应用程序来说，100ms 已经足够快了。

• 在浏览器上增加了负载？ 一般来说，在页面上添加大量重量级的 setInterval 是不好的。但在这种特殊情况下，添加的页面加载是无法检测到的。

• 它不能扩展到许多输入？ 大多数页面只有少量输入，您可以在同一个 setInterval 中嗅探所有输入。

原文由 Dustin Boswell 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

此 jQuery 代码使用 .bind() 来捕获对任何元素的即时更改，并且应该适用于所有浏览器：

  $('.myElements').each(function() {
   var elem = $(this);

   // Save current value of element
   elem.data('oldVal', elem.val());

   // Look for changes in the value
   elem.bind("propertychange change click keyup input paste", function(event){
      // If value has changed...
      if (elem.data('oldVal') != elem.val()) {
       // Updated stored value
       elem.data('oldVal', elem.val());

       // Do action
       ....
     }
   });
 });

但是，请注意 .bind() 在 jQuery 3.0 版中已弃用。任何使用 jQuery 1.7 或更新版本的人都应该使用 .on() 代替。

原文由 phatmann 发布，翻译遵循 CC BY-SA 4.0 许可协议