使用JQuery检测<inputtype=“text”>(立即)的所有更改

Question

使用JQuery检测<inputtype=“text”>(立即)的所有更改的值有很多种方法。<input type="text">可以改变，包括：按键复制/粘贴用JavaScript修改由浏览器或工具栏自动完成我希望在JavaScript函数发生变化时(使用当前的输入值)调用它。我希望它被立即调用，而不仅仅是当输入失去焦点时。我正在寻找在所有浏览器上(最好使用jQuery)的最干净和最健壮的方法来实现这一点。示例用例：在Twitter注册页，用户名字段的值显示在url中“http://twitter/用户名“在它下面。

Answer 1

这个jQuery代码捕捉到对任何元素的立即更改，并且应该在所有浏览器中工作：

 $('.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
       ....
     }
   });
 });

Answer 2

jQuery>=1.9的实时花式解决方案

$("#input-id").on("change keyup paste", function(){
    dosomething();})

如果您还想检测到“单击”事件，只需：

$("#input-id").on("change keyup paste click", function(){
    dosomething();})

如果使用jQuery<=1.4，只需使用live而不是on.

Answer 3

不幸的是，我认为setInterval获奖：

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

这是最干净的解决方案，只有1行代码。它也是最健壮的，因为您不必担心所有不同的事件/方式input才能得到价值。

在这种情况下，使用“setInterval”的缺点似乎不适用：

• 100 ms的潜伏期？

  对于许多应用程序来说，100 ms就足够快了。

• 在浏览器上添加了负载？

  通常来说，在页面上添加大量的重集交换是不好的。但是在这种情况下，添加的页面加载是无法检测的。

• 它不会扩展到很多输入？

  大多数页面只有少数输入，您可以在同一个setInterval中嗅探所有输入。