Google Chrome Formular-Autofill und sein gelber Hintergrund

Question

Ich habe ein Designproblem mit Google Chrome und seiner Formular-Ausfüllfunktion. Wenn Chrome sich an einige Anmeldeinformationen erinnert, ändert es die Hintergrundfarbe in Gelb.

Hier sind einige Screenshots:

Wie kann man diesen Hintergrund entfernen oder einfach diese Autofill-Funktion deaktivieren?

Answer 1

Ein Update zur Lösung von Arjan. Beim Versuch, die Werte zu ändern, wurde dies nicht zugelassen. Bei mir funktioniert das gut. Wenn Sie ein Eingabefeld fokussieren, wird es gelb. Es ist nah genug dran.

$(document).ready(function (){
    if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
        var id = window.setInterval(function(){
            $('input:-webkit-autofill').each(function(){
                var clone = $(this).clone(true, true);
                $(this).after(clone).remove();
            });
        }, 20);

        $('input:-webkit-autofill').focus(function(){window.clearInterval(id);});
    }
});

$('input:-webkit-autofill').focus(function(){window.clearInterval(id);});

Answer 2

Ich habe dieses Problem für ein Passwortfeld wie folgt gelöst:

Ändern Sie den Eingabetyp auf Text anstatt auf Passwort

Entfernen Sie den Eingabetextwert mit jQuery

Ändern Sie den Eingabetyp mit jQuery auf Passwort

$('.js-remove-autofill').val('');    
$('.js-remove-autofill').attr('type', 'password');

Answer 3

Der einzige Weg, der für mich funktioniert hat: (jQuery erforderlich)

$(document).ready(function(e) {
    if ($.browser.webkit) {
        $('#input_id').val(' ').val('');
    }
});

Answer 4

Keine der Lösungen hat für mich funktioniert, die Benutzername- und Passworteingaben wurden immer noch ausgefüllt und mit einem gelben Hintergrund versehen.

Also fragte ich mich: "Wie entscheidet Chrome, was auf einer bestimmten Seite automatisch ausgefüllt werden soll?"

"Sucht es nach Input-IDs, Input-Namen? Formular-IDs? Formularaktionen?"

Bei meinen Experimenten mit den Benutzername- und Passworteingaben fand ich nur zwei Möglichkeiten, wie Chrome die Felder, die automatisch ausgefüllt werden sollen, nicht finden konnte:

1) Setzen Sie das Passwortfeld vor das Textfeld. 2) Geben Sie ihnen denselben Namen und dieselbe ID ... oder keinen Namen und keine ID.

Nachdem die Seite geladen ist, können Sie mit JavaScript entweder die Reihenfolge der Eingaben auf der Seite ändern oder ihnen dynamisch ihren Namen und ihre ID geben ...

Und Chrome weiß nicht, was ihm passiert ist ... die Autocomplete-Funktion bleibt aus.

Verrückter Hack, ich weiß. Aber es funktioniert für mich.

Chrome 34.0.1847.116, OSX 10.7.5

Answer 5

Wie wäre es mit dieser Lösung:

if ($.browser.webkit) {
    $(function() {
        var inputs = $('input:not(.auto-complete-on)');

        inputs.attr('autocomplete', 'off');

        setTimeout(function() {
            inputs.attr('autocomplete', 'on');
        }, 100);
    });
}

Es schaltet die Auto-Vervollständigung und Auto-Ausfüllung aus (damit gelbe Hintergründe verschwinden), wartet 100 Millisekunden und schaltet dann die Auto-Vervollständigungsfunktion zurück, aber ohne Auto-Ausfüllen.

Wenn Sie Eingaben haben, die automatisch ausgefüllt werden müssen, geben Sie ihnen die auto-complete-on CSS-Klasse.