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

Question

Hi, 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 have some fancy label animations sliding things in and out on focus & blur.

However once the user has logged in once the browser will most likely remember the password associated with the users email address/login. (Which is good and should not be disabled.)

However I run into issues triggering my label slide out animation when the browser sets the value on the #password field automatically as the event for this is neither focus nor blur.

Does anyone know which listener to use to run my function when the browser 'auto fills' the users password?

Here is a quick screenshot of the issue:

Answer 1

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

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

Answer 2

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 3

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
});