jQuery: Mit welchem ​​Listener überprüfe ich, ob der Browser das Passwort-Eingabefeld automatisch ausfüllt?

Question

Ich habe ein einfaches Problem, für das ich keine Lösung finden kann.

Grundsätzlich auf dieser Website hier: http://dev.supply.net.nz/vendorapp/ (derzeit in Entwicklung) Ich habe einige Phantasie label Animationen Dinge in und aus auf focus & blur schieben.

Doch sobald der Benutzer einmal den Browser angemeldet wird höchstwahrscheinlich das Passwort mit dem Benutzer E-Mail-Adresse/Login zugeordnet erinnern. (Welche ist gut und sollte nicht deaktiviert werden.)

Jedoch habe ich in Probleme laufen auslösenden meine label aufschiebbare Animation, wenn der Browser setzt den Wert auf dem #password Feld automatisch als Ereignis für diese weder focus noch blur.

Kennt jemand die Zuhörer meine Funktion nutzen laufen, wenn der Browser das Kennwort der Benutzer ‚auto füllt‘?

Hier ist ein kurzer Screenshot der Ausgabe:

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

Answer 1

Vor kurzem las ich einen Artikel namens abfeuern müssen Capturing AutoFill as a Change Event das kann genau das sein, wonach Sie suchen. Der Autor hat eine Funktion mit dem Namen listenForChange() erstellt, die ein Feld für die Autofilling-Aktivität des Formulars überwacht (wird sogar ein Wort automatisch ausgefüllt?). Da es Ihr Formular wirklich regelmäßig überprüft, empfehle ich Ihnen persönlich, dies nur eine bestimmte Anzahl von Malen durchzuführen. Schließlich wird eine Formular-Auto-Füllung in der Regel funktionieren, sobald die Seite fertig geladen ist.

Zitiert der Original-Artikel:

Das Plugin Verwendung des Auslösers() und Daten() Funktionen macht. Kurz gesagt, wir Schleife über das Eingabeelement oder setzen der Kinder Eingabeelemente, Speichern ihren Anfangswert in den Datencache von der Funktion data() zur Verfügung gestellt. Wir dann überprüfen, ob der gespeicherte Wert den Wert der Eingabe während der aktuellen Iteration entspricht. Wenn ja, tun wir nichts, wenn nicht, wir manuell auslösen das Änderungsereignis über Trigger(). Es gibt auch ein bisschen Logik darin, das Element zu ignorieren, das Fokus hat. Wir müssen nicht kümmern uns um dieses Element, da, wenn der Wert geändert wird, während der Benutzer Fokus hat, wird das Änderungsereignis als normal ausgelöst werden, wenn das Element verschwommen ist.

Und hier ist die Funktion selbst einhüllen Sie nicht wollen, um den Artikel zu gehen und lesen (was Sie sollten):

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

Alle Kredit geht an den Besitzer von FurryBrains.com für das Schreiben Artikel.

Answer 2

Sie werden manuell das Ereignis in Ihrem .ready()

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

Answer 3

Auch sollten Sie wahrscheinlich auch einen Zuhörer auf Änderung setzen:

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