Detect all changes to a (immediately) using JQuery

Detect all changes to a (immediately) using JQuery

There are many ways the value of a 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).
Example use case: On the Twitter Signup page, the username field’s value gets shown in the url “http://twitter/username” below it.

Solutions/Answers:

Solution 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
       ....
     }
   });
 });

Solution 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.

Solution 3:

Unfortunately, I think setInterval wins the prize:

<input type=text id=input_id />
<script>
setInterval(function() { ObserveInputValue($('#input_id').val()); }, 100);
</script>

It’s the cleanest solution, at only 1 line of code. It’s also the most robust, since you don’t have to worry about all the different events/ways an input can get a value.

The downsides of using ‘setInterval’ don’t seem to apply in this case:

  • The 100ms latency? For many applications, 100ms is fast enough.
  • Added load on the browser? In general, adding lots of heavy-weight setIntervals on your page is bad. But in this particular case, the added page load is undetectable.
  • It doesn’t scale to many inputs? Most pages don’t have more than a handful of inputs, which you can sniff all in the same setInterval.

Solution 4:

Binding to the oninput event seems to work fine in most sane browsers. IE9 supports it too, but the implementation is buggy (the event is not fired when deleting characters).

With jQuery version 1.7+ the on method is useful to bind to the event like this:

$(".inputElement").on("input", null, null, callbackFunction);

Solution 5:

2017 answer: the input event does exactly this for anything more recent than IE8.

$(el).on('input', callback)

Solution 6:

Unfortunately there is no event or set of events that matches your criteria. Keypresses and copy/paste can both be handled with the keyup event. Changes through JS are trickier. If you have control over the code that sets the textbox, your best bet is to modify it to either call your function directly or trigger a user event on the textbox:

// Compare the textbox's current and last value.  Report a change to the console.
function watchTextbox() {
  var txtInput = $('#txtInput');
  var lastValue = txtInput.data('lastValue');
  var currentValue = txtInput.val();
  if (lastValue != currentValue) {
    console.log('Value changed from ' + lastValue + ' to ' + currentValue);
    txtInput.data('lastValue', currentValue);
  }
}

// Record the initial value of the textbox.
$('#txtInput').data('lastValue', $('#txtInput').val());

// Bind to the keypress and user-defined set event.
$('#txtInput').bind('keypress set', null, watchTextbox);

// Example of JS code triggering the user event
$('#btnSetText').click(function (ev) {
  $('#txtInput').val('abc def').trigger('set');
});

If you don’t have control over that code, you could use setInterval() to ‘watch’ the textbox for changes:

// Check the textbox every 100 milliseconds.  This seems to be pretty responsive.
setInterval(watchTextbox, 100);

This sort of active monitoring won’t catch updates ‘immediately’, but it seems to be fast enough that there is no perceptible lag. As DrLouie pointed out in comments, this solution probably doesn’t scale well if you need to watch lots of inputs. You can always adjust the 2nd parameter to setInterval() to check more or less frequently.