Detecting when the autofill has been filled

Question

After a long struggle, I've finally found out the only way to clear autofill styling in every browser:

$('input').each(function() {
    var $this = $(this);

    $this.after($this.clone()).remove();
});

The problem is, it can't be run in load, because the autofilling of the fields happens sometime after the fact. Right now I'm running it on a timeout of 100 milliseconds after load:

// Kill autofill styles
$(window).on({
    load: function() {
        setTimeout(function() {
            $('.text').each(function() {
                var $this = $(this);

                $this.after($this.clone()).remove();
            });
        }, 100);
    }
});

and that seems safe on even the slowest of systems, but it's really not elegant. Is there some kind of reliable event or check I can make to see if the autofill is complete?

EDIT: This is autofill.

autofill http://dl.dropbox.com/u/2463964/autofill.png

Answer 1

If you're using Chrome or Safari, you can use the input:-webkit-autofill CSS selector to get the autofilled fields.

Example detection code:

setInterval(function() {
    var autofilled = document.querySelectorAll('input:-webkit-autofill');
    // do something with the elements...
}, 500);