JavaScript Event for Input Change

If anyone had ever tried using the “change” event on a text input they know that the event doesn’t fire until the user leaves the input. This can get really frustrating when you want to fire some JavaScript while the user is entering data into the input.

But there is an answer to this dismal situation! That answer would be “input propertychange”. Using this combination of events will allow you to run your code as soon as the user changes whatever is in the text input without having to wait for them to leave the input.

Here is an example using jQuery that toggles an element based on some criteria that will run any time the user changes the input:

$('.text-input').on('input propertychange', function () {
    if (someCondition) {
        $('.element').toggle();
    }
});

I’ve already used this several times and I love it. Enjoy!

Leave a Reply