检测jQuery中的输入变化?
When using jquery .change
on an input
the event will only be fired when the input loses focus
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?
解决方案UPDATED for clarification and example
examples: http://jsfiddle.net/pxfunc/5kpeJ/
Method 1. input
event
In modern browsers use the input
event. 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.
In jQuery do that like this
$('#someInput').bind('input', function() {
$(this).val() // get the current value of the input field.
});
starting with jQuery 1.7, replace bind
with on
:
$('#someInput').on('input', function() {
$(this).val() // get the current value of the input field.
});
Method 2. keyup
event
For older browsers use the keyup
event (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 keyup
event fires, but also when the "shift" key is released the keyup
event 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:
$('#someInput').keyup(function() {
$(this).val() // get the current value of the input field.
});
Method 3. Timer (setInterval
or setTimeout
)
To get around the limitations of keyup
you can set a timer to periodically check the value of the input to determine a change in value. You can use setInterval
or setTimeout
to do this timer check. See the marked answer on this SO question: jQuery textbox change event or see the fiddle for a working example using focus
and blur
events to start and stop the timer for a specific input field
相关文章