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

Question

a的价值<input type="text">可以通过多种方式改变,包括:

• 按键
• 复制粘贴
• 用JavaScript修改
• 通过浏览器或工具栏自动完成

我希望我的JavaScript函数在任何时候都会被调用(使用当前输入值).我希望它能立即被调用,而不仅仅是当输入失去焦点时.

我正在寻找在所有浏览器中执行此操作的最干净,最强大的方法(最好使用jQuery).

示例用例:在Twitter注册页面上,用户名字段的值显示在其下方的URL" http:// twitter/username "中.

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>

这是最干净的解决方案,只有一行代码.它也是最强大的,因为您不必担心input可以获得价值的所有不同事件/方式.

在这种情况下,使用'setInterval'的缺点似乎不适用:

• 100毫秒的延迟？ 对于许多应用,100ms足够快.
• 在浏览器上添加了负载？ 通常,在页面上添加大量的重量级setIntervals是不好的.但在这种特殊情况下,添加的页面加载是不可检测的.
• 它不能扩展到许多输入？ 大多数页面没有多少输入,您可以在同一个setInterval中嗅探所有输入.

Answer 4

绑定到oninput事件似乎在大多数理智的浏览器中都能正常工作.IE9也支持它,但实现有bug(删除字符时不会触发事件).

使用jQuery 1.7+版本,该on方法可以像这样绑定到事件:

$(".inputElement").on("input", null, null, callbackFunction);

Answer 5

2017答案:输入事件对IE8的最新版本确实如此.

$(el).on('input', callback)

Answer 6

遗憾的是,没有符合您条件的事件或事件集.可以使用keyup事件处理键盘和复制/粘贴.通过JS进行的更改比较棘手.如果您可以控制设置文本框的代码,最好将其修改为直接调用函数或触发文本框上的用户事件:

// Compare the textbox's current and last value.  Report a change to the console.
function watchTextbox() {
  var txtInput = $('#txtInput');
  var lastValue = txtInput.data('lastValue');
  var currentValue = txtInput.val();
  if (lastValue != currentValue) {
    console.log('Value changed from ' + lastValue + ' to ' + currentValue);
    txtInput.data('lastValue', currentValue);
  }
}

// Record the initial value of the textbox.
$('#txtInput').data('lastValue', $('#txtInput').val());

// Bind to the keypress and user-defined set event.
$('#txtInput').bind('keypress set', null, watchTextbox);

// Example of JS code triggering the user event
$('#btnSetText').click(function (ev) {
  $('#txtInput').val('abc def').trigger('set');
});

如果您无法控制该代码,则可以使用setInterval()"监视"文本框进行更改:

// Check the textbox every 100 milliseconds.  This seems to be pretty responsive.
setInterval(watchTextbox, 100);

这种主动监控不会立即捕获更新,但似乎足够快,没有明显的滞后.正如DrLouie在评论中指出的那样,如果你需要观察大量的输入,这个解决方案可能无法很好地扩展.您可以随时调整第二个参数以setInterval()进行更频繁或更低频率的检查.

Answer 7

这是一个不使用 jQuery 的解决方案（它确实已经过时并且现在没有必要）

使用该事件，"input"您可以查找任何类型的更改：

删除、退格、粘贴、键入以及任何会更改输入值的操作。

该input事件与文本输入直接相关。任何时候文本以任何方式更改，input都会被发送。

document.querySelector("#testInput").addEventListener("input", test);

function test(e) {
    var a = document.getElementById('output');
    a.innerText += "Detected an Update!\n";
}

<input id="testInput">
<br>
<a id="output"></a>

Answer 8

如果你不喜欢任何其他答案,这里有一个稍微不同的解决方案:

var field_selectors = ["#a", "#b"];
setInterval(function() { 
  $.each(field_selectors, function() { 
    var input = $(this);
    var old = input.attr("data-old-value");
    var current = input.val();
    if (old !== current) { 
      if (typeof old != 'undefined') { 
        ... your code ...
      }
      input.attr("data-old-value", current);
    }   
  }   
}, 500);

考虑到您不能依靠点击和键盘来捕获上下文菜单粘贴.