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

Ich benutze Chrome - Version 64.0.3282.140 (Offizieller Build) (64-Bit) und habe folgenden Code zusammen mit dem Formularnamen verwendet und es hat für mich funktioniert.

....

    setTimeout(function(){
        document.formNameHere.reset();
    },500);

Answer 2

Keine der Lösungen hat funktioniert, außer indem ich ihm ein gefälschtes Feld für die automatische Vervollständigung gegeben habe. Ich habe ein React-Komponente erstellt, um dieses Problem zu lösen.

import React from 'react'

// Google Chrome weigert sich hartnäckig, das HTML-Attribut autocomplete="off" zu respektieren, daher
// müssen wir ihm ein "gefälschtes" Feld geben, damit er es automatisch ergänzt, das nie "benutzt" wird.

const DontBeEvil = () => (

)

export default DontBeEvil

Answer 3

Ich nenne das den Vorschlaghammer-Ansatz, aber er scheint für mich zu funktionieren, wo alle anderen Ansätze, die ich versucht habe, gescheitert sind:

Hinweis: Die input Name- und ID-Attribute sollten nichts enthalten, was dem Browser einen Hinweis auf die Daten geben würde, da diese Lösung sonst nicht funktioniert. Ich benutze zum Beispiel "fa" anstelle von "FullAddress".

Und das folgende Skript beim Seitenaufruf (dieses Skript verwendet JQuery):

$("[data-autocomplete-ninja]").each(function () {
    $(this).focus(function () {
        $(this).data("ninja-name", $(this).attr("name")).attr("name", "");
    }).blur(function () {
        $(this).attr("name", $(this).data("ninja-name"));
    });
});

Die obige Lösung sollte verhindern, dass der Browser Daten aus anderen Formularen autofillt oder aus vorherigen Sendungen im selben Formular.

Im Grunde genommen entferne ich das Name-Attribut, während das Eingabefeld im Fokus ist. Solange Sie nichts machen, was das Name-Attribut benötigt, während das Element im Fokus ist, wie z.B. Selektoren nach Elementnamen verwenden, sollte diese Lösung harmlos sein.

Answer 4

Für dieses Problem habe ich diese CSS-Lösung verwendet. Es funktioniert für mich.

input{
  text-security:disc !important;
  -webkit-text-security:disc !important;
  -moz-text-security:disc !important;
}

Answer 5

Ich habe eine nahezu perfekte Lösung für dieses Problem: Entfernen Sie "type=password" von allen Passwort-Eingabeelementen, nachdem sie alle in den DOM geladen wurden, geben Sie eine Verzögerung, um das "type=password" zurückzusetzen. Chrome wird den geänderten Typ für das automatische Ausfüllen ignorieren. Beispiel:

setTimeout(()=>{ele.type="password"},3000)

Oder ändern Sie den Typ über ein Ereignis:

ele.oninput=function(){ele.type="password"}