Better Input Change Event

Often it is important to trigger an event, after the user of your website/web app has filled out an text input. You have to do something with the given value in JavaScript.

The intended event for this is change, which will be triggered, when the user has ended changing by leaving the input with his cursor, mostly by using the TAB key. This works at some degree, if there is a physical keyboard, but not really on mobile devices … and for me is leaving the field often too late to start the upcoming event.

A better way to show the user the result of his entered value, could be the event input which fires on every key stroke, but could be way to often, if the triggered event is for example an AJAX call.

Best solution is, to observe the users key strokes and trigger the event, when he stops typing. Then there is no extra action needed by the user and the event isn’t triggered multiple times.

Here’s an implementation with jQuery:

1
2
3
4
5
6
7
8
9
10
$("#my-text-input").keyup(function () {
var $this = $(this);
clearTimeout($.data(this, 'timer'));
var wait = setTimeout(function () {

//do something with the value...

}, 1000);
$(this).data('timer', wait);
});

Important is to wipe and set the timer on every key up, to achive that the event will be executed after 1 second after the last key stroke only.