Wie können Sie feststellen, ob ein Browser ein Textfeld automatisch ausgefüllt hat? Besonders bei Benutzernamen- und Passwortfeldern, die beim Laden der Seite automatisch ausgefüllt werden.
Meine erste Frage ist, wann dies in der Seitenladesequenz auftritt. Ist es vor oder nach document.ready?
Zweitens, wie kann ich mithilfe der Logik herausfinden, ob dies geschehen ist? Es ist nicht so, dass ich das verhindern möchte, sondern mich einfach in das Ereignis einhängen. Am liebsten so etwas:
if (autoFilled == true) {
} else {
}
Wenn möglich, würde ich gerne eine jsfiddle sehen, die Ihre Antwort zeigt.
Mögliche Duplikate
DOM-Ereignis zum automatischen Ausfüllen des Browserkennworts?
Vom Browser automatisch ausgefüllte und durch Javascript ausgelöste Ereignisse
- Beide Fragen erklären nicht wirklich, welche Ereignisse ausgelöst werden, sondern überprüfen das Textfeld ständig (nicht gut für die Leistung!).
quelle
Antworten:
Das Problem ist, dass das automatische Ausfüllen von verschiedenen Browsern unterschiedlich behandelt wird. Einige senden das Änderungsereignis aus, andere nicht. Es ist daher fast unmöglich, sich an ein Ereignis zu binden, das ausgelöst wird, wenn der Browser ein Eingabefeld automatisch vervollständigt.
Ereignisauslöser für verschiedene Browser ändern:
Für Felder für Benutzername / Passwort:
Für andere Formularfelder:
Am besten deaktivieren Sie entweder die automatische Vervollständigung für ein Formular mit
autocomplete="off"
in Ihrem Formular verwendet wird, oder fragen in regelmäßigen Abständen ab, ob es ausgefüllt ist.Bei Ihrer Frage, ob es auf oder vor dem Dokument ausgefüllt ist, variiert es bereits wieder von Browser zu Browser und sogar von Version zu Version. Für Benutzername / Passwort-Felder wird nur ausgefüllt, wenn Sie ein Benutzername-Passwortfeld auswählen. Insgesamt hätten Sie also einen sehr unordentlichen Code, wenn Sie versuchen, an ein Ereignis anzuhängen.
Sie können dies HIER gut lesen
quelle
input
Ereignis nicht. Das ist es, was Chrome bei der automatischen Vervollständigung auslöst (und wahrscheinlich auch beim automatischen Ausfüllen, wenn Chrome das hat; ich schalte dieses Zeug immer aus).Lösung für WebKit-Browser
Aus den MDN-Dokumenten für die : -webkit-autofill CSS -Pseudoklasse :
Wir können eine CSS-Regel für den ungültigen Übergang für das gewünschte
<input>
Element definieren, sobald es:-webkit-autofill
bearbeitet wurde. JS kann sich dann an die anschließenanimationstart
Ereignis anschließen.Dank an das Klarna UI- Team. Sehen Sie ihre schöne Implementierung hier:
quelle
Dies funktioniert für mich in den neuesten Versionen von Firefox, Chrome und Edge:
quelle
'input'
! Dies war die einfachste Lösung für mich, aber ich habe nur auf Autocomplete getestet, nicht auf Autofill.Für Google Chrome Autocomplete hat dies bei mir funktioniert:
quelle
Nur für den Fall, dass jemand nach einer Lösung sucht (so wie ich es heute war), um eine Änderung beim automatischen Ausfüllen des Browsers zu hören, ist hier eine benutzerdefinierte Abfragemethode, die ich erstellt habe, um den Vorgang beim Hinzufügen eines Änderungslisteners zu einer Eingabe zu vereinfachen:
Sie können es so nennen:
quelle
Ich habe viel über dieses Problem gelesen und wollte eine sehr schnelle Problemumgehung bereitstellen, die mir geholfen hat.
wo
inputBackgroundNormalState
für meine Vorlage ist 'rgb (255, 255, 255)'.Wenn Browser die automatische Vervollständigung anwenden, deuten sie im Grunde genommen darauf hin, dass die Eingabe automatisch ausgefüllt wird, indem eine andere (störende) gelbe Farbe auf die Eingabe angewendet wird.
Bearbeiten: Dies funktioniert für jeden Browser
quelle
Leider ist die einzige zuverlässige Möglichkeit, diesen Cross-Browser zu überprüfen, das Abfragen der Eingabe. Um es ansprechbar zu machen, hören Sie sich auch Ereignisse an. Chrome hat damit begonnen, automatische Füllwerte vor Javascript zu verbergen, das einen Hack benötigt.
Fügen Sie einen Fix für die versteckten Werte für das automatische Ausfüllen von Chrome-Kennwörtern hinzu.
quelle
Es gibt eine neue Polyfill-Komponente, um dieses Problem auf Github zu beheben. Schauen Sie sich das AutoFill-Event an . Sie müssen es nur installieren und voilà, das automatische Ausfüllen funktioniert wie erwartet.
quelle
Meine Lösung:
Hören Sie sich
change
Ereignisse wie gewohnt an und gehen Sie beim Laden des DOM-Inhalts folgendermaßen vor:Dadurch werden die Änderungsereignisse für alle Felder ausgelöst, die nicht leer sind, bevor der Benutzer die Möglichkeit hatte, sie zu bearbeiten.
quelle
Ich hatte auch das gleiche Problem, bei dem das Etikett das automatische Ausfüllen nicht erkannte und die Animation zum Verschieben des Etiketts beim Füllen von Text überlappte und diese Lösung für mich funktionierte.
quelle
Ich suchte nach einer ähnlichen Sache. Nur Chrome ... In meinem Fall musste der Wrapper div wissen, ob das Eingabefeld automatisch ausgefüllt wurde. Ich könnte ihm also zusätzliches CSS geben, genau wie Chrome es im Eingabefeld tut, wenn es automatisch ausgefüllt wird. Bei Betrachtung aller obigen Antworten war meine kombinierte Lösung die folgende:
Das HTML, damit dies funktioniert, wäre
quelle
Ich weiß, dass dies ein alter Thread ist, aber ich kann mir vorstellen, dass viele hier kommen, um eine Lösung dafür zu finden.
Zu diesem Zweck können Sie überprüfen, ob die Eingabe (n) Werte hat:
Ich benutze dies selbst, um beim Laden nach Werten in meinem Anmeldeformular zu suchen, um die Schaltfläche "Senden" zu aktivieren. Der Code wurde für jQuery erstellt, kann jedoch bei Bedarf leicht geändert werden.
quelle
($("#inputID:-webkit-autofill").val().length > 0) {
Dies ist eine Lösung für Browser mit Webkit-Rendering-Engine . Wenn das Formular automatisch ausgefüllt wird, erhalten die Eingaben die Pseudoklasse: -webkit-autofill- ( Eingabe: -webkit-autofill {...}). Dies ist also die Kennung, die Sie über JavaScript überprüfen müssen.
Lösung mit einem Testformular:
Und Javascript:
Problem beim Laden der Seite ist das Abrufen des Kennwortwerts, sogar der Länge. Dies liegt an der Sicherheit des Browsers. Auch das Timeout , weil der Browser das Formular nach einer bestimmten Zeitfolge ausfüllt.
Dieser Code fügt den gefüllten Eingaben die Klasse auto_filled hinzu . Ich habe auch versucht, den Kennwortwert oder die Länge des Eingabetyps zu überprüfen, aber es hat funktioniert, kurz nachdem ein Ereignis auf der Seite aufgetreten ist. Also habe ich versucht, ein Ereignis auszulösen, aber ohne Erfolg. Im Moment ist dies meine Lösung. Genießen!
quelle
Ich habe die perfekte Lösung für diese Frage. Probieren Sie dieses Code-Snippet aus.
Demo ist da
quelle
In Chrome können Sie Felder zum automatischen Ausfüllen erkennen, indem Sie eine spezielle CSS-Regel für automatisch ausgefüllte Elemente festlegen und dann mit Javascript prüfen, ob auf das Element diese Regel angewendet wurde.
Beispiel:
CSS
JavaScript
quelle
Hier ist die CSS-Lösung des Klarna UI-Teams. Sehen Sie ihre nette Implementierung hier Ressource
Funktioniert gut für mich.
quelle
Ich habe diese Lösung für das gleiche Problem verwendet.
HTML-Code sollte sich folgendermaßen ändern:
und jQuery-Code sollte sein in
document.ready
:quelle
Ich habe das Unschärfeereignis für den Benutzernamen verwendet, um zu überprüfen, ob das pwd-Feld automatisch ausgefüllt wurde.
Dies funktioniert für IE und sollte für alle anderen Browser funktionieren (ich habe nur IE überprüft)
quelle
blur
Ereignis. Ich wende die gleiche Funktion für daschange
undblur
Ereignis an und es hat großartig funktioniert. Eine einfache Lösung ohne zusätzliche Bibliotheken.Ich hatte das gleiche Problem und habe diese Lösung geschrieben.
Beim Laden der Seite wird jedes Eingabefeld abgefragt (ich habe 10 Sekunden eingestellt, aber Sie können diesen Wert einstellen).
Nach 10 Sekunden wird die Abfrage für jedes Eingabefeld beendet und nur für die fokussierte Eingabe (falls vorhanden). Es stoppt, wenn Sie die Eingabe verwischen, und startet erneut, wenn Sie eine fokussieren.
Auf diese Weise fragen Sie nur bei wirklichem Bedarf und nur bei einer gültigen Eingabe ab.
Es funktioniert nicht ganz gut, wenn Sie mehrere Werte automatisch einfügen, aber es könnte optimiert werden, um nach jeder Eingabe im aktuellen Formular zu suchen.
Etwas wie:
quelle
Wenn Sie nur erkennen möchten, ob die automatische Füllung verwendet wurde oder nicht, anstatt genau zu erkennen, wann und zu welchem Feld die automatische Füllung verwendet wurde, können Sie einfach ein verstecktes Element hinzufügen, das automatisch ausgefüllt wird, und dann prüfen, ob dies der Fall ist enthält einen beliebigen Wert. Ich verstehe, dass dies möglicherweise nicht das ist, woran viele Menschen interessiert sind. Stellen Sie das Eingabefeld mit einem negativen tabIndex und mit absoluten Koordinaten weit außerhalb des Bildschirms ein. Es ist wichtig, dass die Eingabe Teil derselben Form ist wie der Rest der Eingabe. Sie müssen einen Namen verwenden, der durch automatisches Ausfüllen erfasst wird (z. B. "zweiter Name").
Hängen Sie diese Eingabe an das Formular an und überprüfen Sie den Wert beim Senden des Formulars.
quelle
Das tut es eine Lösung dafür zu geben, die nicht auf Abfragen beruht (zumindest für Chrome). Es ist fast genauso hackisch, aber ich denke, es ist geringfügig besser als globale Umfragen.
Stellen Sie sich das folgende Szenario vor:
Der Benutzer beginnt, Feld1 auszufüllen
Der Benutzer wählt einen Vorschlag zur automatischen Vervollständigung aus, der die Felder 2 und 3 automatisch ausfüllt
Lösung: Registrieren Sie eine Unschärfe für alle Felder, die über das folgende jQuery-Snippet $ (': - webkit-autofill') prüft, ob automatisch ausgefüllte Felder vorhanden sind.
Dies wird nicht sofort geschehen, da es verzögert wird, bis der Benutzer Feld1 verwischt, aber es ist nicht auf globale Abfragen angewiesen, daher ist IMO eine bessere Lösung.
Da das Drücken der Eingabetaste ein Formular senden kann, benötigen Sie möglicherweise auch einen entsprechenden Handler für den Tastendruck.
Alternativ können Sie die globale Abfrage verwenden, um $ (': - webkit-autofill') zu überprüfen.
quelle
Aus meiner persönlichen Erfahrung funktioniert der folgende Code gut mit Firefox IE und Safari, funktioniert aber nicht sehr gut bei der Auswahl der automatischen Vervollständigung in Chrome.
Der folgende Code funktioniert besser, da er jedes Mal ausgelöst wird, wenn der Benutzer auf das Eingabefeld klickt. Von dort aus können Sie überprüfen, ob das Eingabefeld leer ist oder nicht.
quelle
Ich habe es auf Chrom geschafft mit:
quelle
Meine Lösung ist:
quelle
Nach Recherchen besteht das Problem darin, dass Webkit-Browser bei der automatischen Vervollständigung kein Änderungsereignis auslösen. Meine Lösung bestand darin, die vom Webkit hinzugefügte AutoFill-Klasse abzurufen und das Änderungsereignis selbst auszulösen.
Hier ist ein Link zum Thema Chrom. https://bugs.chromium.org/p/chromium/issues/detail?id=636425
quelle
Um zum Beispiel E-Mails zu erkennen, habe ich "on change" versucht und ein Mutationsbeobachter hat nicht funktioniert. setInterval funktioniert gut mit der automatischen Füllung von LinkedIn (es wird nicht mein gesamter Code angezeigt, aber Sie haben die Idee), und es funktioniert gut mit dem Backend, wenn Sie hier zusätzliche Bedingungen hinzufügen, um die AJAX zu verlangsamen. Und wenn sich im Formularfeld nichts ändert, z. B. wenn sie nicht zum Bearbeiten ihrer E-Mail eingeben, verhindert lastEmail sinnlose AJAX-Pings.
quelle
Es fiel mir schwer, das automatische Ausfüllen in Firefox zu erkennen. Dies ist die einzige Lösung, die für mich funktioniert hat:
Demo
HTML:
CSS:
JavaScript:
Für Chrome verwende ich:
if ($(this).css('animation-name') == 'onAutoFillStart')
Für Firefox:
if ($(this).val() != '')
quelle
versuchen Sie es in CSS
input:-webkit-autofill { border-color: #9B9FC4 !important; }
quelle