jQuery: What listener do I use to check for browser auto filling the password input field?

Question

I have a simple problem that I cannot seem to find a solution to.

Basically on this website here: http://dev.supply.net.nz/vendorapp/ (currently in development) I ha

Answer 1

I recently read an article called Capturing AutoFill as a Change Event that just may be what you're looking for. The author created a function called listenForChange() that monitors a field for form autofilling activity (is autofilling even a word?). Since it checks your form really frequently I personally suggest you to only run this a certain number of times. After all a form auto-fill will usually do its work as soon as the page has finished loading.

Quoting the original article:

The plugin makes use of the trigger() and data() functions. In a nutshell, we loop over the input element or set of children input elements, storing their initial value in the data cache provided by the data() function. We then check to see if the stored value matches the value of the input during the current iteration. If so, we do nothing, if not, we manually fire the change event via trigger(). There’s also a bit of logic in there to ignore the element that has focus. We don’t need to worry about this element, since if the value is changed while the user has focus, the change event will be fired as normal when the element is blurred.

And here's the function itself incase you don't want to go and read the article (which you should):

(function($) {
    $.fn.listenForChange = function(options) {
        settings = $.extend({
            interval: 200 // in microseconds
        }, options);

        var jquery_object = this;
        var current_focus = null;

        jquery_object.filter(":input").add(":input", jquery_object).focus( function() {
            current_focus = this;
        }).blur( function() {
            current_focus = null;
        });

        setInterval(function() {
            // allow
            jquery_object.filter(":input").add(":input", jquery_object).each(function() {
                // set data cache on element to input value if not yet set
                if ($(this).data('change_listener') == undefined) {
                    $(this).data('change_listener', $(this).val());
                    return;
                }
                // return if the value matches the cache
                if ($(this).data('change_listener') == $(this).val()) {
                    return;
                }
                // ignore if element is in focus (since change event will fire on blur)
                if (this == current_focus) {
                    return;
                }
                // if we make it here, manually fire the change event and set the new value
                $(this).trigger('change');
                $(this).data('change_listener', $(this).val());
            });
        }, settings.interval);
        return this;
    };
})(jQuery);

All credit goes to the owner of FurryBrains.com for writing the article.

Answer 2

Also you should probably also put a listener on change:

$('#password').change(function() {
    // DEAL WITH IT IF THERE IS CONTENT IN IT AND THE LABEL IS STILL THERE
});

Answer 3

You'll have to manually fire the event in your .ready()

var $p = $('#password');
if($p.val() != '') {
  $('#password').focus();
}