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

autocomplete="off" funktioniert jetzt, also können Sie einfach Folgendes tun:

Getestet im aktuellen Chrome 70 sowie in allen Versionen ab Chrome 62.

Demo:

• das obere input hat die automatische Vervollständigung aktiviert
• das untere input hat die automatische Vervollständigung durch Hinzufügen von autocomplete="off" deaktiviert

Answer 2

Die einzige Lösung, die auf Chrome und Firefox funktioniert und erfolgreich getestet wurde, besteht darin, das input mit einem form zu umschließen, das autocomplete="off" wie unten gezeigt hat:

Answer 3

Nach langem Suchen fand ich heraus, dass das automatische Dropdown-Menü in Chrome (Version 83.0.4103.116) nicht angezeigt wird, wenn wir die Attribute "name" und "id" im Eingabefeld entfernen. z.B. der Code wie folgt

  Die Autovervollständigung funktioniert, wenn das name- und id-Attribut nicht im Eingabefeld gesetzt sind

  Die Autovervollständigung funktioniert hier, da das id-Attribut gesetzt ist

Answer 4

Es scheint, dass das Chrome-Autocomplete-Ereignis bei DOMContentLoaded ausgelöst wird, und in der neuesten Version von Chrome (110.0.5481.178) jetzt autocomplete="nope" und autocomplete="new-password" oder zufälliges Attribut ignoriert, also wenn Sie den readonly-Trick oder andere JQuery- und Js-Zufälligkeiten nicht verwenden möchten, können Sie die Eingaben (E-Mail, Passwort und Telefon hauptsächlich) einfach auf Text setzen und im load-Ereignis einfach wieder auf den richtigen Typ umstellen, dies sollte mindestens 1ms nach dem load-Ereignis geschehen, denn wenn es sofort gemacht wird, wird es vom Browser automatisch vervollständigt, verwenden Sie also diesen Trick:

Setzen Sie den Eingabetyp type auf "text" und speichern Sie den echten Typ in einem Attribut oder einer Klasse wie folgt:

Dann, im Fenster load-Ereignis, verwenden Sie die setTimeout-Funktion und es ist erledigt, die Eingabe wird den richtigen Typ haben und wird nicht automatisch ausgefüllt

window.addEventListener('load', ()=>{
    document.querySelectorAll('input[data-on-load-type]').forEach(trickedInput=>{
        trickedInput.setAttribute('type', trickedInput.getAttribute('data-on-load-type'))
    });
});

Bearbeiten: möchte nur mehr Informationen darüber hinzufügen, wie das Autocomplete zu funktionieren scheint.

Das Autocomplete passiert meistens, wenn ein Passwort und mindestens ein anderes Eingabeelement im DOM sind, der Browser wird alles als autocompletable behandeln, auch wenn sie sich nicht in einem

-Tag befinden oder das autocomplete-Attribut auf nope oder new-password gesetzt ist, also wenn ein Passwortfeld gefunden wird und jedes andere autocompletable Eingabefeld wie E-Mail, Telefon oder Adresse vorhanden ist, werden diese ausgefüllt, außer wenn sie display: none; haben, dann wird der Browser trotzdem versuchen, jedes andere sichtbare Eingabeelement auszufüllen, auch wenn es nicht mit einem Kontakt- oder Anmeldeformular zusammenhängt, wie z.B. eine Eingabesuche in einer Suchleiste, und wenn Sie ein Skript haben, um die Eingaben anzuzeigen, werden sie manchmal ausgefüllt, wenn ein Passwort im DOM vorhanden ist, also ist dies ein großes Problem und Browser sollten respektieren, wenn etwas nicht automatisch ausgefüllt werden soll. Sobald der Browser also weiß, dass es ein Passwortfeld im DOM gibt, scheint er einen Listener an Autocomplete-Eingaben anzuhängen, wenn sich deren Anzeige ändert, daher habe ich diese Lösung gefunden, indem ich den Typ auf Text setze und ihn dann mit einer kleinen Verzögerung nach dem load-Ereignis auf den richtigen Typ ändere, es scheint ziemlich gut zu funktionieren, bisher.

Answer 5

MAR 2020

Ich stehe vor diesem Problem und leider hat keines der Lösungen für mich funktioniert. Also habe ich den kleinen Hack angewendet, der gut funktioniert.

$('#password').on('click', function (event) {
  $('#password').removeAttr('readonly');
  $('#password').focus();
});

$('#password').on('blur', function (event) {
  $('#password').attr('readonly', 'readonly');
});

Wenn Sie auf das Passwort-Eingabefeld klicken, beginnt es, Vorschläge anzuzeigen, aber wenn Sie den Fokus auf das Eingabefeld setzen, werden keine Vorschläge angezeigt. So habe ich mein Problem gelöst.

Ich hoffe, es wird jemandem helfen.