在jQuery中检测输入变化?

当在input使用jQuery .change时,事件只会在输入失去焦点时被触发

在我的情况下,只要输入值改变,我需要调用服务(检查值是否有效)。 我怎么能做到这一点?

8 Solutions collect form web for “在jQuery中检测输入变化?”

更新澄清和例子

例子: http : //jsfiddle.net/pxfunc/5kpeJ/

方法1. input事件

在现代浏览器中使用input事件。 当用户输入文本字段时,该事件将触发,粘贴,撤消,基本上随时间值从一个值改变到另一个值。

在jQuery中是这样的

 $('#someInput').bind('input', function() { $(this).val() // get the current value of the input field. }); 

从jQuery 1.7开始,使用on替换bind

 $('#someInput').on('input', function() { $(this).val() // get the current value of the input field. }); 

方法2. keyup事件

对于较老的浏览器,使用键盘事件(一旦键盘上的键被释放,这个事件就会触发,这个事件可能会给出一种误判,因为当“w”被释放时,输入值被改变,键盘事件触发,而且当“shift”键被释放时,键入事件触发,但是输入没有改变)。 如果用户右键单击并从上下文菜单中粘贴,则此方法不会触发:

 $('#someInput').keyup(function() { $(this).val() // get the current value of the input field. }); 

方法3.计时器( setIntervalsetTimeout

为了解决keyup的局限性,你可以设置一个定时器来定期检查输入的值来确定一个值的变化。 您可以使用setIntervalsetTimeout来执行此计时器检查。 看到这个SO问题标记的答案: jQuery文本框更改事件或看到一个工作示例使用focusblur事件来启动和停止计时器的特定输入字段的小提琴

如果你有HTML5:

  • oninput (仅在实际发生更改时触发,但立即执行)

否则,您需要检查所有可能表明输入元素值发生变化的事件:

  • onchange
  • onkeyup不是 keydownkeypress因为输入的值不会有新的按键)
  • onpaste (支持时)

也许:

  • onmouseup (我不确定这个)

使用HTML5而不使用jQuery,您可以使用input事件 :

 var input = document.querySelector('input'); input.addEventListener('input', function() { console.log('input changed to: ', input.value); }); 

每当输入文字改变时,这个会被激发。

支持IE9 +和其他浏览器。

试试这里住在一个jsFiddle 。

正如其他人已经建议,你的情况的解决方案是嗅探多个事件
做这个工作的插件经常听取下列事件:

  $ input.on('change keydown keypress keyup mousedown click mouseup',handler); 

如果您认为这可能合适,您可以添加focusblur和其他事件。
我建议在事件中不要超过听,因为它会在浏览器内存中加载进一步的程序来根据用户的行为执行。

注意:请注意,使用JavaScript(例如通过jQuery .val()方法)更改输入元素的值将不会触发上述任何事件。
(参考: https : //api.jquery.com/change/ )。

如果您希望事件在元素内发生更改时被触发,那么您可以使用keyup事件。

有像keyupkeypress的 jQuery事件,你可以使用输入的HTML元素。 您可以另外使用blur()事件。

这涵盖了使用jQuery 1.7和更高版本的输入的每一个变化:

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

//元素失去焦点时触发// .blur

 $('#target').blur(function() { alert($(this).val()); }); 

//手动触发使用:

 $('#target').blur(); 
  • 如何closures隐藏DIV点击它(但不在里面)
  • 用jQuery删除CSS“top”和“left”属性
  • 如何使用jQuery指定contentType的jsonp POST请求?
  • jQuery UI自动完成小部件searchconfiguration
  • 自动执行function的jQuery与JavaScript的区别
  • 将string转换为数字并添加一个
  • 提交时停止表单刷新页面
  • jQuery&CSS - 删除/添加显示:无
  • 引导程序3:保持页面上选定的选项卡刷新
  • 如何使用JQueryselect没有特定子元素的元素
  • jQuery的UI事件和UI对象的属性