jQuery value change event delay

Question

There’s the HTML5 oninput event, supported by all the current major browsers and can be worked into IE 8 and lower:

$("#myInput").bind("input", function () {
    // ...
})

http://whattheheadsaid.com/2010/09/effectively-detecting-user-input-in-javascript (explanation)
http://whattheheadsaid.com/projects/input-special-event (plugin)

A very simple cross browser approach would be

$("#myInput").bind("input propertychange", function (evt) {
    // If it's the propertychange event, make sure it's the value that changed.
    if (window.event && event.type == "propertychange" && event.propertyName != "value")
        return;

    // Clear any previously set timer before setting a fresh one
    window.clearTimeout($(this).data("timeout"));
    $(this).data("timeout", setTimeout(function () {
        // Do your thing here
    }, 2000));
});

This would make the event fire twice in IE 9 (one for propertychange, one for input), but it doesn’t matter because of the nature of the event handler.

Leave a Comment Cancel reply