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

IT技术 javascript jquery html
2021-01-31 16:40:54

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

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

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

我正在寻找在所有浏览器中执行此操作的最干净和最健壮的方法(最好使用 jQuery)。

6个回答

这个 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
       ....
     }
   });
 });
供大家参考,input我认为应该涵盖所有现代浏览器的 HTML5 事件(MDN 参考)。keyup应该赶上其余的,虽然有一点延迟(input在按键按下时触发)。propertychange是专有的 MS 事件,我不确定是否paste真的有必要。
2021-03-14 16:40:54
Mehmet,代码并不是要捕获通过 JS 更改的值。
2021-03-19 16:40:54
您可以在 propertychange、keyup 等时在输入上触发自定义事件,然后在任何地方使用它。
2021-03-26 16:40:54
@MehmetAtaş部分正确。此处input事件的参考指出,当通过 JavaScript 修改内容时,它不会触发。但是,该事件确实会在通过 JS 进行修改时触发(请参阅此处)。所以这段代码在 IE 上通过 JS 修改内容时会起作用,但在其他浏览器上不起作用。onpropertychange
2021-03-28 16:40:54
我错了还是在通过 javascript 更改文本时无法处理,例如 document.getElementById('txtInput').value = 'some text';
2021-04-04 16:40:54

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

仅供参考:如果使用键盘选择无效的日期,这些事件将以空白值触发。IE。2 月 30 日。stackoverflow.com/ questions/48564568/...
2021-03-18 16:40:54
如何检测日期时间选择器何时填充#input-id?没有任何事件(更改、粘贴)起作用。
2021-03-23 16:40:54
这有一个缺点。如果您使用 Tab 键离开输入字段 - 即使未编辑内容,它也会引发 keyup 事件。
2021-03-27 16:40:54
这很棒!我用 jquery 1.8.3 试过它,它工作正常。我还有一些 livequery() 代码需要替换,所以我什至无法升级到 1.9.1。我知道它很旧,但整个网站也是如此。
2021-03-27 16:40:54

不幸的是,我认为setInterval获奖了:

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

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

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

  • 100 毫秒的延迟? 对于许多应用程序,100ms 已经足够快了。
  • 在浏览器上增加了负载? 一般来说,在页面上添加大量重量级的 setIntervals 是不好的。但在这种特殊情况下,添加的页面加载是无法检测到的。
  • 它不能扩展到许多输入? 大多数页面只有少量输入,您可以在同一个 setInterval 中嗅探所有这些输入。
@Gavin JS 似乎没有每次更改输入时都会触发的 onchanged 事件。(只需执行 document.getElementById(name).value = Math.random() )以查看所有事件触发器解决方案都不起作用。
2021-03-11 16:40:54
注意:可以缓解过载。如果在输入获得焦点时启动 setInterval 并在输入失去焦点时启动 clearInterval
2021-03-17 16:40:54
这似乎是在使用 Nintendo 3DS 浏览器(版本/1.7552.EU)时检测表单中输入字段更改的唯一方法。
2021-03-23 16:40:54
为什么要创建一个持续运行的 100 毫秒间隔,而没有理由让它持续运行?事件的人。使用它们。
2021-03-24 16:40:54
@Gavin,在这种特殊情况下,JS 缺少事件......找到我们一组可以识别的事件,用户输入,用户粘贴,用户剪切,javascript 插入,javascript 删除,表单自动完成,隐藏表单,不显示形式。
2021-04-02 16:40:54

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

在 jQuery 1.7+ 版本中,该on方法对于绑定到这样的事件很有用:

$(".inputElement").on("input", null, null, callbackFunction);
oninputinput[type=reset]正如您在此测试中看到的那样,事件不适用于javascript 编辑:codepen.io/yukulele/pen/xtEpb
2021-03-14 16:40:54
@Yukulélé,至少我们可以比尝试检测所有可能的用户操作更容易地解决这个问题
2021-03-21 16:40:54

2017 年回答输入事件对于比 IE8 更新的任何东西都这样做。

$(el).on('input', callback)
抱歉,但是……这与上面 HRJ 2012 年的回答有何不同?无论如何,input事件无法检测到 JS 更改。
2021-03-15 16:40:54