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

2021 September Antwort

Da ich mit diesem Problem umgehen musste, war die einzige stabile Lösung, jedes Mal, wenn die Website gerendert wird, eine zufällige Zeichenfolge für das Name- und Autocomplete-Attribut in den -Elementen zu generieren.

Ein einfaches Beispiel dafür, wie dies mit reinem JavaScript funktioniert, finden Sie unten.

Html:

     Autofill deaktiviert mit zufälliger Zeichenfolge

         Vorname

         Nachname

         Stadt

         Straße

         Postleitzahl

JavaScript:

const randomString = (Math.random() + 1).toString(36).substring(5);
const disableAutoFillForm = document.getElementById('disable-autofill-form');
const disableAutoFillFormInputs = [
  ...disableAutoFillForm.getElementsByTagName('input'),
];
disableAutoFillFormInputs.forEach((input) => {
  input.setAttribute('autocomplete', randomString);
  input.setAttribute('name', randomString);
});

Ein Stackblitz-Projekt zum Ausprobieren finden Sie hier.

Answer 2

Im Grunde können wir das Autocomplete aus jedem Textfeld von Chrome, Firefox oder jeder Art von Browser entfernen. Es ist einfach JavaScript.

window.onload=function(){                                              
        setTimeout(function(){  
            document.getElementById('benutzername').value = '';
            document.getElementById('passwort').value = '';
        },100);
    }  

Wenn Ihr Fenster fertig geladen ist, werden nach 100 Millisekunden unsere Benutzername- und Passwortfelder gelöscht. Ich denke, das ist der beste Weg, um das Autocomplete in allen Browsern zu deaktivieren (besonders für Chrome).

Answer 3

Ich habe gerade folgendes ausprobiert und es scheint im Chrome 53 zu funktionieren - es deaktiviert auch das Dropdown-Menü "Passwort verwenden für:", wenn man das Passwort eingibt.

Setzen Sie einfach den Typ Ihres Passwortfelds auf text und fügen Sie dann den onfocus Handler (inline oder über jQuery/vanilla JS) hinzu, um den Typ auf password zu setzen:

onfocus="this.setAttribute('type','password')"

Oder noch besser:

onfocus="if(this.getAttribute('type')==='text') this.setAttribute('type','password')"

Answer 4

Fügen Sie das direkt nach dem Formular-Tag hinzu:

Fügen Sie dies Ihrer CSS-Datei hinzu:

.div-form{
opacity: 0;
}

Answer 5

Ich habe eine weitere Lösung gefunden - maskiere einfach die Zeichen in deinen autocomplete="off" Eingaben mit style="-webkit-text-security: disc;". Du kannst es auch zu deinen CSS-Regeln hinzufügen, beispielsweise auf folgende Weise:

[autocomplete="off"] {
  -webkit-text-security: disc;
}

Das Hauptziel ist es, das type="password" oder ein ähnliches Attribut vom Element zu entfernen.

Zumindest funktioniert diese Lösung bis zum 2021-01-24...