I want to trigger an event every single time data changes in an HTML text input field regardless of focus

Question

How do you catch the client-side event when a browser changes an input text field using the browser's autocomplete feature for a plain HTML input field? (This is the small dropdown on input fields that is supplied by the browser, I know that you can disable it with "autocomplete=off" in some browsers per input field.)

I'm already binding to the "change/keyup" event, but these don't handle the case when the user starts typing in a value and uses the Browser's native autocomplete to fill in the rest of the field (and staying in the focus of the field.)

Answer 1

The only foolproof way I know of to always catch ALL changes no matter how they're done is to use a setInterval. This is somewhat CPU intensive, though, so you probably want to try to keep the selector more minimal than this.

setInterval( function() {
    $('input').each( function() {
        if ($(this).val() != $(this).attr("_value")) {
            // Save the new value
            $(this).attr("_value", $(this).val());

            // TODO - Handle the changed value
        }
    });
}, 100);

Answer 2

I'm surprised that the 'change' event doesn't fire to be honest...

Anyway, Plutor has the right idea. A more CPU friendly version of his answer:

var value,
    elem = $('input[name=email]')[0];
setInterval(function(){
    if (elem.value !== value) { /* do something */ }
    value = elem.value;
}, 100);