jQuery textbox change event doesn't fire until textbox loses focus?
Binding to both events is the typical way to do it. You can also bind to the paste event.
You can bind to multiple events like this:
$("#textbox").on('change keyup paste', function() {
console.log('I am pretty sure the text box changed');
});
If you wanted to be pedantic about it, you should also bind to mouseup to cater for dragging text around, and add a lastValue
variable to ensure that the text actually did change:
var lastValue = '';
$("#textbox").on('change keyup paste mouseup', function() {
if ($(this).val() != lastValue) {
lastValue = $(this).val();
console.log('The text box really changed this time');
}
});
And if you want to be super duper
pedantic then you should use an interval timer to cater for auto fill, plugins, etc:
var lastValue = '';
setInterval(function() {
if ($("#textbox").val() != lastValue) {
lastValue = $("#textbox").val();
console.log('I am definitely sure the text box realy realy changed this time');
}
}, 500);
On modern browsers, you can use the input
event:
DEMO
$("#textbox").on('input',function() {alert("Change detected!");});
$(this).bind('input propertychange', function() {
//your code here
});
This is works for typing, paste, right click mouse paste etc.