jQuery: quale ascoltatore posso utilizzare per verificare che il browser compili automaticamente il campo di inserimento della password?

Question

Ho un semplice problema a cui non riesco a trovare una soluzione.

In sostanza su questo sito qui: http://dev.supply.net.nz/vendorapp/ (attualmente in fase di sviluppo) devo alcuni fantasia label animazioni scorrevoli le cose dentro e fuori il focus & blur.

Tuttavia, una volta che l'utente ha effettuato l'accesso una volta che il browser molto probabilmente ricorderà la password associata all'indirizzo e-mail/login dell'utente. (Che è buono e non deve essere disattivata.)

Tuttavia mi imbatto in questioni innescando il mio label diapositiva di animazione quando il browser imposta il valore sul campo #password automaticamente come l'evento per questo non è né focus né blur.

Qualcuno sa quale ascoltatore utilizzare per eseguire la mia funzione quando il browser "riempie automaticamente" la password dell'utente?

ecco un breve screenshot del problema:

Password Autofill Label Issue http://dl.dropbox.com/u/376243/fill_issue.png

Answer 1

di recente ho letto un articolo intitolato Capturing AutoFill as a Change Event che potrebbe essere proprio quello che stai cercando. L'autore ha creato una funzione denominata listenForChange() che monitora un campo per l'attività di riempimento automatico dei moduli (la compilazione automatica include anche una parola?). Dal momento che controlla il tuo modulo molto spesso personalmente ti suggerisco di farlo funzionare solo un certo numero di volte. Dopotutto un modulo di auto-compilazione di solito fa il suo lavoro non appena la pagina ha terminato il caricamento.

Citando l'articolo originale:

Il plugin si avvale del trigger() ei dati funzioni(). In poche parole, eseguiamo il looping sull'elemento di input o impostiamo di elementi di input secondari, memorizzando il loro valore iniziale nella cache di dati fornita dalla funzione data(). Abbiamo quindi controllare se il valore memorizzato corrisponde al valore dell'ingresso durante l'iterazione corrente. In tal caso, eseguiamo il comando , in caso contrario, attiviamo manualmente l'evento di modifica tramite trigger(). C'è anche un po 'di logica in là per ignorare l'elemento che ha lo stato attivo. Non dobbiamo preoccuparci di questo elemento, poiché se il valore viene modificato mentre l'utente è attivo, l'evento di cambiamento verrà attivato normalmente quando l'elemento è sfocato.

Ed ecco la funzione stessa in caso non si vuole andare a leggere l'articolo (che si dovrebbe):

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

Tutto il merito va al proprietario del FurryBrains.com per la scrittura del articolo.

Answer 2

Dovrete fuoco manualmente l'evento nella vostra .ready()

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

Answer 3

anche probabilmente si dovrebbe anche mettere un ascoltatore sul cambiamento:

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