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
• form reset

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

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.