SNag SNag - 2 years ago 286
Javascript Question

jQuery textbox change event doesn't fire until textbox loses focus?

I found that jQuery change event on a textbox doesn't fire until I click outside the textbox.


<input type="text" id="textbox" />


$("#textbox").change(function() {alert("Change detected!");});


My application requires the event to be fired on every character change in the textbox. I even tried using keyup instead...

$("#textbox").keyup(function() {alert("Keyup detected!");});

...but it's a known fact that the keyup event isn't fired on right-click-and-paste.

Any workaround? Is having both listeners going to cause any problems?

Answer Source

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);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download