Chrome ignoriert autocomplete="off"

Question

Ich habe eine Webanwendung erstellt, die ein Tagbox-Dropdown verwendet. Dies funktioniert in allen Browsern gut, außer im Chrome-Browser (Version 21.0.1180.89).

Trotz des input-Feldes UND des form-Feldes mit dem Attribut autocomplete="off" besteht Chrome darauf, eine Dropdown-Verlaufsliste früherer Einträge für das Feld anzuzeigen, was die Tagbox-Liste auslöscht.

Answer 1

Ab Chrome 42 funktionieren keine der Lösungen/Hacks in diesem Thread (Stand: 2015-05-21T12:50:23+00:00) für das Deaktivieren der Autovervollständigung für ein einzelnes Feld oder das gesamte Formular.

BEARBEITEN: Ich habe festgestellt, dass Sie tatsächlich nur ein Dummy-E-Mail-Feld in Ihr Formular einfügen müssen (Sie können es mit display: none verstecken), bevor Sie die anderen Felder einfügen, um die Autovervollständigung zu verhindern. Ich nehme an, dass Chrome mit jedem autovervollständigten Feld eine Art Formularsignatur speichert und das Hinzufügen eines weiteren E-Mail-Felds diese Signatur beschädigt und die Autovervollständigung verhindert.

Die gute Nachricht ist, dass da die "Formularsignatur" durch dies beschädigt wird, keines der Felder autovervollständigt wird, daher wird kein JavaScript benötigt, um die Dummy-Felder vor dem Absenden zu leeren.

Alte Antwort:

Das Einzige, was ich noch als praktikabel gefunden habe, ist das Einfügen von zwei Dummy-Feldern des Typs E-Mail und Passwort vor den echten Feldern. Sie können sie auf display: none setzen, um sie zu verstecken (es ist nicht klug genug, um diese Felder zu ignorieren):

Leider müssen die Felder innerhalb Ihres Formulars sein (sonst werden beide Eingabesätze autovervollständigt). Damit die Dummy-Felder wirklich ignoriert werden, benötigen Sie etwas JS, das beim Absenden des Formulars ausgeführt wird, um sie zu leeren:

form.addEventListener('submit', function() {
    form.elements['fake_email'].value = '';
    form.elements['fake_password'].value = '';
});

---

Beachten Sie von oben, dass das Löschen des Werts mit Javascript funktioniert, um die Autovervollständigung zu überschreiben. Wenn der Verlust des ordnungsgemäßen Verhaltens bei deaktiviertem JS akzeptabel ist, können Sie dies alles mit einem JS-Autovervollständigungs-"Polyfill" für Chrome vereinfachen:

(function(document) {

    function polyfillAutocomplete(nodes) {

        for(var i = 0, length = nodes.length; i < length; i++) {

            if(nodes[i].getAttribute('autocomplete') === 'off') {

                nodes[i].value = '';
            }
        }
    }

    setTimeout(function() {

        polyfillAutocomplete(document.getElementsByTagName('input'));
        polyfillAutocomplete(document.getElementsByTagName('textarea'));

    }, 1);

})(window.document);

Answer 2

Obwohl ich zustimme, dass die Autovervollständigung eine Benutzerentscheidung sein sollte, gibt es Zeiten, in denen Chrome damit übermäßig ist (andere Browser könnten es auch sein). Zum Beispiel wird ein Passwortfeld mit einem anderen Namen immer noch automatisch mit einem gespeicherten Passwort gefüllt und das vorherige Feld mit dem Benutzernamen gefüllt. Dies ist besonders ärgerlich, wenn das Formular ein Benutzerverwaltungsformular für eine Web-App ist und Sie nicht möchten, dass die automatische Vervollständigung es mit Ihren eigenen Anmeldeinformationen ausfüllt.

Chrome ignoriert das autocomplete="off" jetzt vollständig. Während die JS-Hacks möglicherweise funktionieren, habe ich eine einfache Methode gefunden, die zum Zeitpunkt des Schreibens funktioniert:

Setzen Sie den Wert des Passwortfelds auf das Steuerzeichen 8 ("\x08" in PHP oder in HTML). Dies verhindert, dass Chrome das Feld automatisch ausfüllt, weil es einen Wert hat, aber kein tatsächlicher Wert eingegeben wird, da dies das Backspace-Zeichen ist.

Ja, das ist immer noch ein Hack, aber es funktioniert für mich. Ihr Ergebnis kann variieren.

Answer 3

Ich habe eine SEHR einfache Lösung für dieses Problem, kein Code erforderlich und eine akzeptable Lösung. Chrome liest oft das Label des Eingabefelds und macht AutoComplete. Sie können einfach ein "leeres" Zeichen in das Label einfügen.

Zum Beispiel: Nachname

Wird zu: Nach‍name

ist das HTML escape-Zeichen für "Leerzeichen".

Das wird immer noch "Nachname" anzeigen, aber AutoComplete wird das Feld nicht erkennen und versuchen, es automatisch auszufüllen.

Answer 4

Chrome ändert ständig die Art und Weise, wie es die automatische Vervollständigung in jeder Version behandelt. Der Weg, den ich gefunden habe, ist, die Felder schreibgeschützt zu machen und bei Klick/Fokus sie nicht schreibgeschützt zu machen. Versuchen Sie diesen jQuery-Schnipsel.

jQuery(document).ready(function($){
//======fix for autocomplete
$('input, :input').attr('readonly',true);//Alle Eingaben beim Laden der Seite schreibgeschützt machen, automatisches Ausfüllen beim Laden der Seite verhindern

 $('input, :input').on( 'click focus', function(){ //bei Eingabeklick
 $('input, :input').attr('readonly',true);//andere Felder schreibgeschützt machen
 $( this ).attr('readonly',false);//aber dieses Feld nicht schreibgeschützt machen
 });
//======./fix for autocomplete
});

Answer 5

Ich habe gerade auf Chrome 49 aktualisiert und Diogo Cids Lösung funktioniert nicht mehr.

Ich habe eine andere Lösung gefunden, indem ich die Felder zur Laufzeit nach dem Laden der Seite ausblende und entferne.

Chrome ignoriert jetzt die ursprüngliche Lösung und wendet die Anmeldedaten auf das erste angezeigte type="password"-Feld und das vorherige type="text"-Feld an, daher habe ich beide Felder mit CSS visibility: hidden; versteckt.

.chromeHack-autocomplete {
    height: 0px !important;
    width: 0px !important;
    opacity: 0 !important;
    padding: 0 !important; margin: 0 !important;
}

jQuery(window).load(function() {
    $(".chromeHack-autocomplete").delay(100).hide(0, function() {
        $(this).remove();
    });
});

Ich weiß, dass es vielleicht nicht sehr elegant aussieht, aber es funktioniert.