Ich habe gerade herausgefunden, dass die aktuelle Version von Chrome, wenn Sie einen Benutzernamen und ein Passwort für eine Website gespeichert haben, Ihren Benutzernamen und Ihre E-Mail-Adresse automatisch in das Feld vor jede type=password Feld. Es kümmert sich nicht darum, wie das Feld heißt - es nimmt einfach an, dass das Feld vor dem Passwort Ihr Benutzername sein wird.
Alte Lösung
Verwenden Sie einfach <form autocomplete="off"> und verhindert das Vorausfüllen von Passwörtern sowie jede Art von heuristischem Ausfüllen von Feldern auf der Grundlage von Annahmen, die ein Browser treffen kann (die oft falsch sind). Im Gegensatz zur Verwendung von <input autocomplete="off"> was anscheinend von der automatischen Kennwortausfüllung ignoriert wird (in Chrome jedenfalls, Firefox befolgt es).
Aktualisierte Lösung
Chrome ignoriert jetzt <form autocomplete="off"> . Daher ist meine ursprüngliche Problemlösung (die ich gelöscht hatte) jetzt der letzte Schrei.
Erstellen Sie einfach ein paar Felder und blenden Sie sie mit "display:none" aus. 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 setzen Sie Ihre echten Felder darunter.
Vergessen Sie nicht, den Kommentar hinzuzufügen, sonst werden sich die anderen in Ihrem Team fragen, was Sie da 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 hat es seit Jahren jetzt auf Dutzende von Projekten verwendet. Es funktioniert immer noch großartig, trotz einiger Kommentare unten. Es gibt keine Probleme mit der Zugänglichkeit, da die Felder display:none was bedeutet, dass sie nicht fokussiert werden. Wie ich bereits erwähnt habe, müssen Sie sie vor Ihre wirklichen Felder.
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 dann 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, seit die Anti-Benutzungs-Experten von Chrome hart an der Arbeit sind. Aber sie haben uns einen Knochen zugeworfen in Form von:
<input type="password" name="whatever" autocomplete="new-password" />
Das funktioniert und löst das Problem weitgehend.
Es funktioniert jedoch nicht, wenn Sie kein Passwortfeld haben, sondern nur eine E-Mail-Adresse. In diesem Fall kann es auch schwierig sein, das gelbe Feld und das Ausfüllen zu beenden. Mit der Lösung für gefälschte Felder lässt sich dies beheben.
Manchmal muss man sogar zwei Lose falscher Felder einfügen und sie an verschiedenen Stellen ausprobieren. Ich hatte z. B. bereits falsche Felder am Anfang meines Formulars, aber Chrome hat vor kurzem wieder angefangen, das Feld "E-Mail" auszufüllen - also habe ich es verdoppelt und weitere falsche Felder direkt vor dem Feld "E-Mail" eingefügt, und das hat das Problem gelöst. Wenn man entweder die erste oder die zweite Gruppe von Feldern entfernt, wird das Formular wieder falsch und übereifrig ausgefüllt.
Aktualisierung März 2020
Es ist nicht klar, ob und wann diese Lösung noch funktioniert. Manchmal scheint sie noch zu funktionieren, aber nicht mehr immer.
In den Kommentaren unten finden Sie ein paar Hinweise. Einer, der gerade von @anilyeni hinzugefügt wurde, könnte eine genauere Untersuchung wert sein:
Das habe ich bemerkt, autocomplete="off" funktioniert unter Chrome 80, wenn weniger als drei Elemente in <form> . Ich weiß nicht, was die Logik ist oder wo die entsprechende Dokumentation darüber.
Auch dieser Beitrag von @dubrox könnte relevant sein, obwohl ich ihn nicht getestet habe:
vielen Dank für den Trick, aber bitte aktualisieren Sie die Antwort, da display:none; funktioniert nicht mehr, aber position: fixed;top:-100px;left:-100px; width:5px; tut :)
Aktualisierung APRIL 2020
Ein spezieller Wert für Chrome für dieses Attribut erfüllt die Aufgabe: (getestet bei Eingabe - aber nicht von mir) autocomplete="chrome-off"
Aktualisierung JUNI 2023
Utilice autocomplete="new-password"
Dies funktioniert derzeit.
