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 musste dieses Problem auf einer Drupal-Seite mit einem riesigen Webformular ansprechen. Da ich den HTML-Code nicht für jedes Eingabefeld bearbeiten kann, habe ich die folgende generische jQuery-Lösung entwickelt.

    // Form Autocomplete FIX
    function is_mobile() {
        if( screen.width < 500 || navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i) ) {
            return true;
        }
        return false;
    }
    jQuery( 'input[autocomplete="off"]' ).each( function() {
        if( is_mobile() ) {
            return;
        }
        jQuery( this ).attr( 'readonly', true );
    } );
    jQuery( 'input[autocomplete="off"]' ).focus( function() {
        if( is_mobile() ) {
            return;
        }
        jQuery( this ).removeAttr( 'readonly' );
        jQuery( this ).focus();
    } );
    jQuery( 'input[autocomplete="off"]' ).blur( function() {
        if( is_mobile() ) {
            return;
        }
        jQuery( this ).attr( 'readonly', true );
    } );

Browsererkennung von hier.

Ich denke, es gibt eine Möglichkeit, diesen Code zu optimieren (ich würde gerne einige Ratschläge bekommen), aber Sie werden die Idee davon bekommen.

Answer 2

Ich habe eine Lösung gefunden, die für mich funktioniert. Sie deaktiviert nicht die automatische Vervollständigung, ermöglicht aber eine Anpassung. Getestet in Chrome 96, Opera 82

/* Ändern Sie Autocomplete-Stile in Chrome */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    border: none;
    border-bottom: 1px solid;
    -webkit-text-fill-color: #000;
    -webkit-box-shadow: 0 0 0 1000px transparent inset;
}

Answer 3

Ich habe die folgende Lösung entwickelt, die alle Felder abfragt, die das Attribut autocomple="off" haben, dann den Wert auf ein Leerzeichen setzt, einen Timer für ca. 200 ms einstellt und dann den Wert wieder auf einen leeren String setzt.

Beispiel:

// Hack, um das automatische Ausfüllen in Chrome zu verhindern
var noFill = document.querySelectorAll("input[autocomplete=off]");

noFill.forEach(function(el) {
    el.setAttribute("value", " ");
    setTimeout(function() {
        el.setAttribute("value", "");
    }, 200);
});

Ich habe 200 ms für den Timer gewählt, weil nach einigen Experimenten 200 ms die Zeit zu sein scheinen, die mein Computer benötigt, damit Chrome aufhört, die Felder automatisch auszufüllen. Ich bin offen für Vorschläge, welche anderen Zeitintervalle für andere Personen besser funktionieren.