Javascript 检测jQuery中的输入变化？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6458840/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Detecting input change in jQuery?
提问by Banshee
When using jquery .changeon an inputthe event will only be fired when the input loses focus
在使用 jquery 时.change，input只有在输入失去焦点时才会触发事件
In my case, I need to make a call to the service (check if value is valid) as soon as the input value is changed. How could I accomplish this?
就我而言，我需要在输入值更改后立即调用服务（检查值是否有效）。我怎么能做到这一点？
回答by MikeM
UPDATED for clarification and example
更新以澄清和示例
examples: http://jsfiddle.net/pxfunc/5kpeJ/
示例：http: //jsfiddle.net/pxfunc/5kpeJ/
Method 1. inputevent
方法一、input事件
In modern browsers use the inputevent. This event will fire when the user is typing into a text field, pasting, undoing, basically anytime the value changed from one value to another.
在现代浏览器中使用该input事件。当用户在文本字段中键入、粘贴、撤消，基本上任何时候值从一个值更改为另一个值时，都会触发此事件。
In jQuery do that like this
在 jQuery 中这样做
$('#someInput').bind('input', function() {
$(this).val() // get the current value of the input field.
});
starting with jQuery 1.7, replace bindwith on:
从 jQuery 1.7 开始，替换bind为on：
$('#someInput').on('input', function() {
$(this).val() // get the current value of the input field.
});
Method 2. keyupevent
方法2.keyup事件
For older browsers use the keyupevent (this will fire once a key on the keyboard has been released, this event can give a sort of false positive because when "w" is released the input value is changed and the keyupevent fires, but also when the "shift" key is released the keyupevent fires but no change has been made to the input.). Also this method doesn't fire if the user right-clicks and pastes from the context menu:
对于较旧的浏览器，使用该keyup事件（一旦键盘上的一个键被释放，就会触发，这个事件可能会产生一种误报，因为当“w”被释放时，输入值被改变并且keyup事件被触发，而且当“shift”键被释放，keyup事件触发但没有对输入进行任何更改。）。如果用户右键单击并从上下文菜单中粘贴，则此方法不会触发：
$('#someInput').keyup(function() {
$(this).val() // get the current value of the input field.
});
Method 3. Timer (setIntervalor setTimeout)
方法 3. 定时器（setInterval或setTimeout）
To get around the limitations of keyupyou can set a timer to periodically check the value of the input to determine a change in value. You can use setIntervalor setTimeoutto do this timer check. See the marked answer on this SO question: jQuery textbox change eventor see the fiddle for a working example using focusand blurevents to start and stop the timer for a specific input field
为了绕过限制，keyup您可以设置一个计时器来定期检查输入的值以确定值的变化。您可以使用setInterval或setTimeout来执行此计时器检查。请参阅此 SO 问题的标记答案：jQuery textbox change event或查看使用focus和blur事件来启动和停止特定输入字段的计时器的工作示例的小提琴
回答by Alnitak
If you've got HTML5:
如果你有 HTML5：
oninput(fires only when a change actually happens, but does so immediately)
oninput（仅在实际发生更改时触发，但会立即执行）
Otherwise you need to check for all these events which might indicate a change to the input element's value:
否则，您需要检查所有这些可能表明输入元素值发生更改的事件：
onchangeonkeyup(notkeydownorkeypressas the input's value won't have the new keystroke in it yet)onpaste(when supported)
onchangeonkeyup（不是keydown或keypress因为输入的值中还没有新的击键）onpaste（支持时）
and maybe:
有可能：
onmouseup(I'm not sure about this one)
onmouseup（我不确定这个）
回答by Drew Noakes
With HTML5 and without using jQuery, you can using the inputevent:
使用 HTML5 而不使用 jQuery，您可以使用input事件：
var input = document.querySelector('input');
input.addEventListener('input', function()
{
console.log('input changed to: ', input.value);
});
This will fire each time the input's text changes.
每次输入的文本更改时都会触发。
Supported in IE9+ and other browsers.
支持 IE9+ 和其他浏览器。
Try it live in a jsFiddle here.
在jsFiddle 中尝试一下。
回答by Emanuele Del Grande
As others already suggested, the solution in your case is to sniff multiple events.
Plugins doing this job often listen for the following events:
正如其他人已经建议的那样，您的情况的解决方案是嗅探多个事件。
执行此工作的插件通常会侦听以下事件：
$input.on('change keydown keypress keyup mousedown click mouseup', handler);
If you think it may fit, you can add focus, blurand other events too.
I suggest not to exceed in the events to listen, as it loads in the browser memory further procedures to execute according to the user's behaviour.
如果您认为它可能适合，您也可以添加focus,blur和其他事件。
我建议不要超过要监听的事件，因为它会在浏览器内存中加载更多程序以根据用户的行为执行。
Attention:note that changing the value of an input element with JavaScript (e.g. through the jQuery .val()method) won't fire any of the events above.
(Reference: https://api.jquery.com/change/).
注意：请注意，使用 JavaScript 更改输入元素的值（例如通过 jQuery.val()方法）不会触发上述任何事件。
（参考：https://api.jquery.com/change/）。
回答by Kszili
// .blur is triggered when element loses focus
// 当元素失去焦点时触发 .blur
$('#target').blur(function() {
alert($(this).val());
});
// To trigger manually use:
// 要手动触发，请使用：
$('#target').blur();
回答by Jivings
回答by softwaredeveloper
There are jQuery events like keyupand keypresswhich you can use with input HTML Elements. You could additionally use the blur()event.
有诸如keyup和keypress 之类的 jQuery 事件，您可以将它们与输入 HTML 元素一起使用。您还可以使用blur()事件。
回答by rybo111
This covers every change to an input using jQuery 1.7 and above:
这涵盖了使用 jQuery 1.7 及更高版本对输入的所有更改：
$(".inputElement").on("input", null, null, callbackFunction);
