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

按键 复制/粘贴 JavaScript修改 由浏览器或工具栏自动完成

我希望在JavaScript函数发生变化时调用它(使用当前输入值)。我希望它能马上被调用,而不是在输入失去焦点的时候。

我正在寻找最干净和最健壮的方法来跨所有浏览器(最好使用jQuery)。


当前回答

您可以将'input'事件绑定到<input type="text">。这将在每次输入更改(如复制、粘贴、按键等)时触发。

$("#input-id").on("input", function(){
    // Your action
})

其他回答

下面是一个不使用jQuery的解决方案(它真的很过时,现在没有必要了)

使用事件“input”,你可以查找任何类型的变化:

删除,后退,粘贴,输入,任何会改变输入值的东西。

输入事件与文本输入直接相关。当文本以任何方式被更改时,输入就会被分派。

document.querySelector(“# testInput”)。addEventListener(“输入”,测试); 功能测试(e) { var a = document.getElementById('output'); a.innerText += "检测到更新!\n"; } <输入id = " testInput " > < br > <一个id = "输出" > < / >

这段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()。

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

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);

考虑到您不能依赖于单击和键up来捕获上下文菜单粘贴。

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

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

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

把这段代码添加到某个地方,就可以了。

var originalVal = $.fn.val;
$.fn.val = function(){
    var result =originalVal.apply(this,arguments);
    if(arguments.length>0)
        $(this).change(); // OR with custom event $(this).trigger('value-changed');
    return result;
};

发现这个解决方案在val()不触发change()在jQuery