Ich habe gerade festgestellt, dass die aktuelle Version von Chrome Ihren Benutzernamen / Ihre E-Mail-Adresse vor jedem type=password
Feld automatisch in das Feld ausfüllt, wenn Sie einen gespeicherten Benutzernamen und ein Kennwort für eine Site haben . Es ist egal, wie das Feld heißt - es wird nur das Feld angenommen, bevor das Passwort Ihr Benutzername sein wird.
Alte Lösung
Verwenden Sie <form autocomplete="off">
es einfach und es verhindert das Vorfüllen von Passwörtern sowie jede Art von heuristischem Ausfüllen von Feldern basierend auf Annahmen, die ein Browser treffen kann (die oft falsch sind). Im Gegensatz zu einer Verwendung, <input autocomplete="off">
die vom automatischen Ausfüllen des Kennworts so gut wie ignoriert zu werden scheint (in Chrome befolgt Firefox dies jedoch).
Aktualisierte Lösung
Chrome ignoriert jetzt <form autocomplete="off">
. Daher ist meine ursprüngliche Problemumgehung (die ich gelöscht hatte) jetzt der letzte Schrei.
Erstellen Sie einfach ein paar Felder und machen Sie sie mit "display: none" ausgeblendet. Beispiel:
<!-- fake fields are a workaround for chrome autofill getting the wrong fields -->
<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>
Dann legen Sie Ihre realen Felder darunter.
Denken Sie daran, den Kommentar hinzuzufügen, da sich andere Personen in Ihrem Team fragen, was Sie tun!
Update März 2016
Gerade mit dem neuesten Chrome getestet - alles gut. Dies ist jetzt eine ziemlich alte Antwort, aber ich möchte nur erwähnen, dass unser Team sie seit Jahren für Dutzende von Projekten verwendet. Es funktioniert trotz einiger Kommentare unten immer noch großartig. Es gibt keine Probleme mit der Barrierefreiheit, da die Felder display:none
bedeuten, dass sie nicht fokussiert werden. Wie ich bereits erwähnt habe, müssen Sie sie vorher setzen Ihre realen Felder stellen.
Wenn Sie Javascript verwenden, um Ihr Formular zu ändern, benötigen Sie einen zusätzlichen Trick. Zeigen Sie die gefälschten Felder an, während Sie das Formular bearbeiten, und blenden Sie sie eine Millisekunde später wieder aus.
Beispielcode mit jQuery (vorausgesetzt, Sie geben Ihren gefälschten Feldern eine Klasse):
$(".fake-autofill-fields").show();
// some DOM manipulation/ajax here
window.setTimeout(function () {
$(".fake-autofill-fields").hide();
},1);
Update Juli 2018
Meine Lösung funktioniert nicht mehr so gut, da die Anti-Usability-Experten von Chrome hart gearbeitet haben. Aber sie haben uns einen Knochen geworfen in Form von:
<input type="password" name="whatever" autocomplete="new-password" />
Dies funktioniert und löst meistens das Problem.
Es funktioniert jedoch nicht, wenn Sie kein Kennwortfeld, sondern nur eine E-Mail-Adresse haben. Das kann auch schwierig sein, damit es nicht mehr gelb wird und vorfüllt. Die Lösung für gefälschte Felder kann verwendet werden, um dies zu beheben.
Tatsächlich müssen Sie manchmal zwei gefälschte Felder ablegen und sie an verschiedenen Orten ausprobieren. Zum Beispiel hatte ich bereits zu Beginn meines Formulars gefälschte Felder, aber Chrome hat kürzlich wieder damit begonnen, mein Feld "E-Mail" vorab auszufüllen. Dann habe ich mich verdoppelt und kurz vor dem Feld "E-Mail" weitere gefälschte Felder eingefügt, und das hat das Problem behoben . Wenn Sie entweder das erste oder das zweite Los der Felder entfernen, wird das falsche übereifrige automatische Ausfüllen wiederhergestellt.
Update März 2020
Es ist nicht klar, ob und wann diese Lösung noch funktioniert. Es scheint manchmal immer noch zu funktionieren, aber nicht immer.
In den Kommentaren unten finden Sie einige Hinweise. Eine, die gerade von @anilyeni hinzugefügt wurde, ist möglicherweise eine weitere Untersuchung wert:
Wie ich bemerkt habe, autocomplete="off"
funktioniert auf Chrome 80, wenn weniger als 3 Elemente enthalten sind <form>
. Ich weiß nicht, was die Logik ist oder wo die zugehörige Dokumentation darüber.
Auch dieser von @dubrox kann relevant sein, obwohl ich ihn nicht getestet habe:
Vielen Dank für den Trick, aber bitte aktualisieren Sie die Antwort, da display:none;
es nicht mehr funktioniert, aber position: fixed;top:-100px;left:-100px; width:5px;
funktioniert :)
Update APRIL 2020
Ein besonderer Wert für Chrome für dieses Attribut ist die Ausführung der Aufgabe: (bei Eingabe getestet - aber nicht von mir)
autocomplete="chrome-off"