JQuery: Which listener do I use to verify that the browser automatically fills in the password field?

Question

I have a simple problem where I cannot find a solution.

Mostly on this website here: http://dev.supply.net.nz/vendorapp/ (currently under development) I have some fancy label animations that insert and paste things in focus and blur .

However, as soon as the user logs in, the browser will most likely remember the password associated with the email address / user name. (Which is good and should not be turned off.)

However, I ran into problems causing the label animation to be animated when the browser automatically sets the value to the #password field, since neither focus nor blur exists for this event.

Does anyone know which listener should use to run my function when the browser "automatically populates" the user password?

Here is a brief screenshot:

Password autocomplete error http://dl.dropbox.com/u/376243/fill_issue.png

Answer 1

I recently read an article called Capturing Autocomplete as a change event , which may be just what you are looking for. The author created a function called listenForChange() , which controls the field for autocompletion of the form (even words are autocompleted?). Since he often checks your form, I personally suggest that you only run this a certain number of times. After all, autocompletion of a form usually does its job as soon as the page finishes loading.

Quote from the original article:

The plugin uses the trigger () and data () functions. In a nutshell, we iterate over the input element or set the input elements for children, storing their initial value in the data cache provided by the data () function. We then check to see if the stored value matches the input value during the current iteration. If so, we do nothing, if not, we manually start changing the event through trigger (). Theres also a bit of logic to ignore an element that has focus. We do not need to worry about this element, because if the value changes while the user has focus, the change event will be fired as usual when the element is blurred.

And here the function itself makes you not want to go and read the article (what you need):

 (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 loans are owned by the owner of FurryBrains.com for writing the article.

Answer 2

Also you should probably also add a listener when changing:

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

Answer 3

You will have to manually trigger the event in your .ready ()

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