Triggering True onChange Event for Text Fields

Garth Henson
JavaScript, Uncategorized
27 Mar 2013

Something I’ve run into on multiple occasions is the desire to be able to trap the change event of text fields and textareas – not just on blur but when their value actually changes. I will assume some basic understanding of how DOM elements behave and that, while the input and textarea nodes have change events, they don’t actually fire in all browsers until you move away from them. This led me to thinking that there has to be a somewhat optimal way to trigger an event on those fields only when their value changes. If you’ve ever tried something like this before, you may have settled for a combination of listening to keypress and keyup events to get your desired behavior across all browsers, but once again, you have to attach this to all. elements on which you wish it to behave. jQuery once again allows us to develop a very simplistic solution in a relatively tiny bit of code:

So, where does this get us? What any good developer will be asking is, “sure, but what’s in it for me?” Upon examination of the code, there are a couple major benefits. First of all, there is no more need for checking keyCode or even manually caching and comparing values to know when your fields have changed. If you depend solely upon a keyup or keypress event, arrow keys, function keys, escape and any number of other keys would fire your event without actually changing the value of your field. Then, we got into checking which key was pressed or doing a manual check of the current value against some cached value to see if it had indeed changed.

This code does all that implicitly for us, and by adding the first focus listener, every field caches its own value as soon as it receives focus, allowing for extremely easy comparison. Now, if we want to drop the new value of a field into the console whenever it changes, we can do something as simple as this:

Even if you focus on the field and arrow around in it or even tab away and back, the change event will not be fired until the actual value of the field changes. Very useful, no?

One word of warning, though: use global listeners like this sparingly and carefully. If you’re not extremely comfortable with the use of on and understand what it is doing, you can quickly cause much more memory consumption than what you should. Your browser (and users) will thank you for being conservative in this matter. Even things as simple as restricting application to a context on your page or using a more specific selector for your elements will improve performance on things like this.


Garth Henson
Garth is as a lead engineer at The Walt Disney Company, specializing in JavaScript applications.

Recent Blog Posts

Let's Work Together
Contact Me