在jQuery中检测输入变化?
当在input
使用jQuery .change
时,事件只会在输入失去焦点时被触发
在我的情况下,只要输入值改变,我需要调用服务(检查值是否有效)。 我怎么能做到这一点?
更新澄清和例子
例子: 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.计时器( setInterval
或setTimeout
)
为了解决keyup
的局限性,你可以设置一个定时器来定期检查输入的值来确定一个值的变化。 您可以使用setInterval
或setTimeout
来执行此计时器检查。 看到这个SO问题标记的答案: jQuery文本框更改事件或看到一个工作示例使用focus
和blur
事件来启动和停止计时器的特定输入字段的小提琴
如果你有HTML5:
-
oninput
(仅在实际发生更改时触发,但立即执行)
否则,您需要检查所有可能表明输入元素值发生变化的事件:
-
onchange
-
onkeyup
( 不是keydown
或keypress
因为输入的值不会有新的按键) -
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);
如果您认为这可能合适,您可以添加focus
, blur
和其他事件。
我建议在事件中不要超过听,因为它会在浏览器内存中加载进一步的程序来根据用户的行为执行。
注意:请注意,使用JavaScript(例如通过jQuery .val()
方法)更改输入元素的值将不会触发上述任何事件。
(参考: https : //api.jquery.com/change/ )。
如果您希望事件在元素内发生更改时被触发,那么您可以使用keyup事件。
有像keyup和keypress的 jQuery事件,你可以使用输入的HTML元素。 您可以另外使用blur()事件。
这涵盖了使用jQuery 1.7和更高版本的输入的每一个变化:
$(".inputElement").on("input", null, null, callbackFunction);
//元素失去焦点时触发// .blur
$('#target').blur(function() { alert($(this).val()); });
//手动触发使用:
$('#target').blur();