在 input 上使用jquery .change 时,仅当输入失去焦点时才会触发事件
input
.change
在我的情况下,我需要在输入值改变后立即调用服务(检查值是否有效) . 我怎么能做到这一点?
有一些jQuery事件,如 keyup 和 keypress ,您可以使用输入HTML元素 . 您还可以使用 blur() 事件 .
这涵盖了使用jQuery 1.7及更高版本对输入的每个更改:
$(".inputElement").on("input", null, null, callbackFunction);
UPDATED for clarification and example
示例:http://jsfiddle.net/pxfunc/5kpeJ/
Method 1. input event
在现代浏览器中使用input事件 . 当用户键入文本字段,粘贴,撤消时,基本上随时值从一个值更改为另一个值时,将触发此事件 .
在jQuery中这样做
$('#someInput').bind('input', function() { $(this).val() // get the current value of the input field. });
从jQuery 1.7开始,将 bind 替换为 on :
bind
on
$('#someInput').on('input', function() { $(this).val() // get the current value of the input field. });
Method 2. keyup event
对于较旧的浏览器,使用 keyup 事件(一旦键盘上的某个键被释放,这将触发,此事件可能会产生一种误报,因为当"w"被释放时,输入值会被更改并且 keyup 事件会触发,但是当"shift"键被释放 keyup 事件触发但未对输入进行任何更改 . ) . 如果用户右键单击并粘贴上下文菜单,则此方法也不会触发:
keyup
$('#someInput').keyup(function() { $(this).val() // get the current value of the input field. });
Method 3. Timer (setInterval or setTimeout)
要绕过 keyup 的限制,您可以设置计时器以定期检查输入的值以确定值的变化 . 您可以使用 setInterval 或 setTimeout 进行此计时器检查 . 请参阅此SO问题上的标记答案:jQuery textbox change event或使用 focus 和 blur 事件查看工作示例的小提琴,以启动和停止特定输入字段的计时器
setInterval
setTimeout
focus
blur
如果你有HTML5:
oninput
否则,您需要检查所有这些可能表示输入元素值更改的事件:
onchange
onkeyup ( not keydown 或 keypress 作为输入's value won'已经有了新的击键)
onkeyup
keydown
keypress
onpaste (支持时)
onpaste
有可能:
onmouseup
使用HTML5并且不使用jQuery,您可以使用input event:
var input = document.querySelector('input'); input.addEventListener('input', function() { console.log('input changed to: ', input.value); });
每次输入文本更改时都会触发 .
在IE9和其他浏览器中受支持 .
试试jsFiddle here .
正如其他人已经建议的那样,你的案例中的解决方案是 sniff multiple events .执行此工作的插件通常会侦听以下事件:
$input.on('change keydown keypress keyup mousedown click mouseup', handler);
如果您认为它可能适合,您也可以添加 focus , blur 和其他事件 .我建议不要超过要监听的事件,因为它会在浏览器内存中加载根据用户行为执行的进一步程序 .
Attention: 请注意,使用JavaScript更改输入元素的值(例如,通过jQuery .val() 方法)不会触发上述任何事件 .(参考:https://api.jquery.com/change/) .
.val()
如果您希望在元素中更改某些内容时触发事件,则可以使用keyup事件 .
//元素失去焦点时触发.blur
$('#target').blur(function() { alert($(this).val()); });
//要手动触发:
$('#target').blur();
8 回答
有一些jQuery事件,如 keyup 和 keypress ,您可以使用输入HTML元素 . 您还可以使用 blur() 事件 .
这涵盖了使用jQuery 1.7及更高版本对输入的每个更改:
UPDATED for clarification and example
示例:http://jsfiddle.net/pxfunc/5kpeJ/
Method 1. input event
在现代浏览器中使用input事件 . 当用户键入文本字段,粘贴,撤消时,基本上随时值从一个值更改为另一个值时,将触发此事件 .
在jQuery中这样做
从jQuery 1.7开始,将
bind
替换为on
:Method 2. keyup event
对于较旧的浏览器,使用
keyup
事件(一旦键盘上的某个键被释放,这将触发,此事件可能会产生一种误报,因为当"w"被释放时,输入值会被更改并且keyup
事件会触发,但是当"shift"键被释放keyup
事件触发但未对输入进行任何更改 . ) . 如果用户右键单击并粘贴上下文菜单,则此方法也不会触发:Method 3. Timer (setInterval or setTimeout)
要绕过
keyup
的限制,您可以设置计时器以定期检查输入的值以确定值的变化 . 您可以使用setInterval
或setTimeout
进行此计时器检查 . 请参阅此SO问题上的标记答案:jQuery textbox change event或使用focus
和blur
事件查看工作示例的小提琴,以启动和停止特定输入字段的计时器如果你有HTML5:
oninput
(仅在实际发生更改时触发,但会立即触发)否则,您需要检查所有这些可能表示输入元素值更改的事件:
onchange
onkeyup
( notkeydown
或keypress
作为输入's value won'已经有了新的击键)onpaste
(支持时)有可能:
onmouseup
(我不确定这个)使用HTML5并且不使用jQuery,您可以使用input event:
每次输入文本更改时都会触发 .
在IE9和其他浏览器中受支持 .
试试jsFiddle here .
正如其他人已经建议的那样,你的案例中的解决方案是 sniff multiple events .
执行此工作的插件通常会侦听以下事件:
如果您认为它可能适合,您也可以添加
focus
,blur
和其他事件 .我建议不要超过要监听的事件,因为它会在浏览器内存中加载根据用户行为执行的进一步程序 .
Attention: 请注意,使用JavaScript更改输入元素的值(例如,通过jQuery
.val()
方法)不会触发上述任何事件 .(参考:https://api.jquery.com/change/) .
如果您希望在元素中更改某些内容时触发事件,则可以使用keyup事件 .
//元素失去焦点时触发.blur
//要手动触发: