wake-up-neo.com

Google Chrome-Formular wird automatisch ausgefüllt und der gelbe Hintergrund wird angezeigt

Ich habe ein Designproblem mit Google Chrome und der Funktion zum automatischen Ausfüllen von Formularen .. Wenn Chrome sich ein paar Anmeldedaten/Kennwörter speichert, ändert sich die Hintergrundfarbe in eine gelbe.

Hier sind einige Screenshots:

alt textalt text

Wie entferne ich diesen Hintergrund oder deaktiviere einfach dieses automatische Ausfüllen?

htmlcssformsgoogle-chromeautofill
239
hsz

Ändern Sie "Weiß" in jede gewünschte Farbe.

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
}
275
Fareed Alnamrouti

Wenn Sie transparente Eingabefelder wünschen, können Sie Übergangs- und Übergangsverzögerung verwenden. 

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition-delay: 9999s;
    -webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
}
45
Gísli Freyr Svavarsson

Lösung hier :

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $(window).load(function(){
        $('input:-webkit-autofill').each(function(){
            var text = $(this).val();
            var name = $(this).attr('name');
            $(this).after(this.outerHTML).remove();
            $('input[name=' + name + ']').val(text);
        });
    });
}
43
Alessandro Benedetti

In Firefox können Sie die automatische Vervollständigung eines Formulars deaktivieren, indem Sie das Attribut autocomplete = "off/on" verwenden. Ebenso kann die automatische Vervollständigung einzelner Objekte mit demselben Attribut festgelegt werden.

<form autocomplete="off" method=".." action="..">  
<input type="text" name="textboxname" autocomplete="off">

Sie können dies in Chrome testen, da es funktionieren sollte.

26
Kinlan

Wenn Sie das automatische Ausfüllen sowie alle mit den Eingabeelementen verknüpften Daten, zugehörigen Handler und Funktionen beibehalten möchten, versuchen Sie dieses Skript:

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)
{
    var _interval = window.setInterval(function ()
    {
        var autofills = $('input:-webkit-autofill');
        if (autofills.length > 0)
        {
            window.clearInterval(_interval); // stop polling
            autofills.each(function()
            {
                var clone = $(this).clone(true, true);
                $(this).after(clone).remove();
            });
        }
    }, 20);
}

Es fragt nach Autofill-Elementen, kopiert sie, einschließlich Daten und Ereignisse, fügt sie an derselben Stelle in das DOM ein und entfernt das Original. Der Abruf wird angehalten, sobald ein Klon gefunden wird, da das automatische Ausfüllen nach dem Laden der Seite manchmal eine Sekunde dauert. Dies ist eine Variation eines vorherigen Codebeispiels, jedoch robuster und behält so viele Funktionen wie möglich bei.

(Bestätigt, in Chrome, Firefox und IE 8 zu arbeiten.)

25
Jason

Das folgende CSS entfernt die gelbe Hintergrundfarbe und ersetzt sie durch eine Hintergrundfarbe Ihrer Wahl. Das automatische Ausfüllen wird nicht deaktiviert, und es sind keine jQuery- oder Javascript-Hacks erforderlich.

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
    -webkit-text-fill-color: #333;
}
input:-webkit-autofill:focus {
    -webkit-box-shadow: /*your box-shadow*/,0 0 0 50px white inset;
    -webkit-text-fill-color: #333;
}

Lösung kopiert aus: Überschreiben Sie das Ausfüllen von Formularen und das Hervorheben von Eingaben mit HTML/CSS.

16
humbads

Für mich gearbeitet, nur die CSS-Änderung erforderlich.

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset!important;
}

sie können anstelle von #ffffff eine beliebige Farbe einsetzen.

6
Milan

Ein bisschen hackig, aber perfekt für mich

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}
3
maximilianhp

Dies behebt das Problem sowohl bei Safari als auch bei Chrome

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

Eine Kombination von Antworten funktionierte für mich 

<style>
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0px 1000px #373e4a inset !important;
           -webkit-text-fill-color: white !important;
   }
</style>
3
LeRoy

Ich benutze das,

input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; }
input:focus:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; }
/* You can use color:#color to change the color */
2
Bhavesh Gangani

Hier ist die MooTools-Version von Jason. Behebt es auch in Safari.

window.addEvent('domready',function() { 
    $('username').focus();

    if ((navigator.userAgent.toLowerCase().indexOf(\"chrome\") >= 0)||(navigator.userAgent.toLowerCase().indexOf(\"safari\") >= 0))
    {

        var _interval = window.setInterval(function ()
        {
            var autofills = $$('input:-webkit-autofill');
            if (autofills.length > 0)
            {

                window.clearInterval(_interval); // stop polling
                autofills.each(function(el)
                {
                    var clone = el.clone(true,true).inject(el,'after');;
                    el.dispose();
                });
            }
        }, 20);                                               


    }
});
2
Confidant

Dies half mir, eine reine CSS-Version.

input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; }

wo weiß kann eine beliebige Farbe sein.

2
Matt Goo

Fügen Sie einfach diese kleine Codezeile in Ihr Tag ein. 

autocomplete="off"

Fügen Sie dies jedoch nicht in das Feld Benutzername/E-Mail/ID-Name ein. Wenn Sie weiterhin Autocomplete verwenden möchten, wird dies für dieses Feld deaktiviert. Ich habe jedoch einen Ausweg gefunden, indem Sie einfach den Code in Ihr Kennworteingabe-Tag einfügen, da Sie sowieso niemals automatisch ein Kennwort ausfüllen. Mit diesem Fix sollten Sie die Farbstärke und die automatische Vervollständigung des Matinain in Ihrem E-Mail-/Benutzernamenfeld entfernen und sperrige Hacks wie Jquery oder Javascript vermeiden.

1
Alex Sarnowski

Wenn Sie es vollständig loswerden möchten, habe ich den Code in den vorherigen Antworten so angepasst, dass er für Schwebeflug, Aktiv und Fokus funktioniert:

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:active, input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px white inset;
}
1
Alex

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

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

Versuchen Sie diesen Code:

 	$(function(){
   		setTimeout(function(){
   			$('[name=user_password]').attr('type', 'password');
   		}, 1000);
   	});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<input name="user_password" type="password">

0
Андрій Глущенко

Hier ist eine Mootools-Lösung, die dasselbe tut wie die von Alessandro - ersetzt jeden betroffenen Eingang durch einen neuen.

if (Browser.chrome) {
    $$('input:-webkit-autofill').each(function(item) {
        var text = item.value;
        var name = item.get('name');
        var newEl = new Element('input');
        newEl.set('name', name);
        newEl.value = text;
        newEl.replaces(item);
    });
}
0
And Finally

Ich habe dieses Problem für ein Passwortfeld behoben, das ich so habe:

Setzen Sie den Eingabetyp auf Text anstelle von Kennwort

Entfernen Sie den Eingabetextwert mit jQuery

Konvertieren Sie den Eingabetyp mit jQuery in Kennwort

<input type="text" class="remove-autofill">

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

Ein Update für die Lösung von Arjans. Wenn Sie versuchen, die Werte zu ändern, würden Sie dies nicht zulassen. Das funktioniert gut für mich. Wenn Sie sich auf einen Eingang konzentrieren, wird er gelb. es ist nah genug.

$(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);});
0
Dustin Silk

fareed namrouti Die Antwort ist korrekt. Der Hintergrund wird jedoch immer noch gelb, wenn die Eingabe ausgewählt wird . Hinzufügen von !important behebt das Problem. Wenn Sie auch textarea und select mit demselben Verhalten möchten, fügen Sie einfach textarea:-webkit-autofill, select:-webkit-autofill hinzu.

Nur Eingabe 

input:-webkit-autofill {
    background-color: rgb(250, 255, 189) !important;
}

Eingabe, Auswahl, Textbereich 

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: rgb(250, 255, 189) !important;
}
0
Merlin

Wenn Sie das gelbe Flimmern vermeiden möchten, bis Ihre CSS angewendet wird, schlagen Sie dem bösen Jungen einen Übergang wie folgt: 

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    transition: background-color 10s ease-in-out 0s;
}
0
Sebastian

Was ist 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 automatische Vervollständigung und die automatische Füllung aus (dh gelbe Hintergründe verschwinden), wartet 100 Millisekunden und schaltet dann die automatische Vervollständigung ohne automatische Füllung zurück.

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

0
cryss

Keine der Lösungen funktionierte für mich, die Eingaben für Benutzername und Kennwort wurden immer noch ausgefüllt und mit dem gelben Hintergrund versehen.

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

"Sucht es nach Eingabe-IDs, Eingabe-Namen? Formular-IDs? Formularaktion?"

Bei meinen Experimenten mit den Eingaben für den Benutzernamen und das Kennwort gab es nur zwei Möglichkeiten, durch die Chrome die Felder nicht finden konnte, die automatisch gefüllt werden sollten:

1) Setzen Sie die Passworteingabe vor die Texteingabe. 2) Geben Sie ihnen denselben Namen und dieselbe ID ... oder keinen Namen und keine ID.

Nach dem Laden der Seite können Sie mit Javascript entweder die Reihenfolge der Eingaben auf der Seite ändern oder dynamisch ihren Namen und ihre ID angeben ...

Und Chrome weiß nicht, was es trifft ... Autocomplete bleibt aus.

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

Chrome 34.0.1847.116, OSX 10.7.5

0
i_a

Das Hinzufügen von autocomplete="off" wird es nicht schneiden.

Ändern Sie das Eingabetypattribut in type="search".
Google wendet das automatische Ausfüllen nicht auf Eingaben mit einer Suchart an.

Ich hoffe, das erspart Ihnen etwas Zeit.

0
Matas Vaitkevicius