Detect all changes to a <input type="text"> (immediately) using JQuery

Question

There are many ways the value of a <input type="text"> can change, including:

• keypresses
• copy/paste
• modified with JavaScript
• auto-completed by browser or a toolbar

I want my JavaScript function to be called (with the current input value) any time it changes. And I want it to be called right away, not just when the input loses focus.

I'm looking for the cleanest and most robust way to do this across all browsers (using jQuery preferably).

Answer 1

This jQuery code catches immediate changes to any element, and should work across all browsers:

 $('.myElements').each(function() {    var elem = $(this);     // Save current value of element    elem.data('oldVal', elem.val());     // Look for changes in the value    elem.bind("propertychange change click keyup input paste", function(event){       // If value has changed...       if (elem.data('oldVal') != elem.val()) {        // Updated stored value        elem.data('oldVal', elem.val());         // Do action        ....      }    });  }); 

Answer 2

A real-time fancy solution for jQuery >= 1.9

$("#input-id").on("change keyup paste", function(){     dosomething(); }) 

if you also want to detect "click" event, just:

$("#input-id").on("change keyup paste click", function(){     dosomething(); }) 

if you're using jQuery <= 1.4, just use live instead of on.