Google Chrome Form Autofill und sein gelber Hintergrund
https://stackoverflow.com/questions/2920306
-
05-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ich habe Design-Problem mit Google Chrome und seiner Form Autofill-Funktion. Wenn Chrome einige Login / Passwort erinnert sich ändert es eine Hintergrundfarbe auf eine gelbe.
Hier sind einige Screenshots:
Wie dieser Hintergrund zu entfernen oder ihn nur autofill deaktivieren?
Lösung
Ändern "weiß" auf jede Farbe, die Sie wollen.
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset !important;
}
Andere Tipps
Wenn Sie Jungs transparente Eingabefelder möchten, können Sie Übergang und Übergang Verzö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;
}
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);
});
});
}
In Firefox können Sie alle zur automatischen Vervollständigung auf einem Formular deaktivieren, indem Sie die Autovervollständigung mit = „off / on“ Attribut. Ebenso die automatische Vervollständigung einzelne Positionen eingestellt werden kann, das gleiche Attribut verwendet wird.
<form autocomplete="off" method=".." action="..">
<input type="text" name="textboxname" autocomplete="off">
Sie können dies testen, in Chrome, wie es funktionieren soll.
Wenn Sie die Autofill erhalten wollen, sowie alle Daten, angebracht Handler und Funktionalität, um Ihre Eingabeelemente angebracht sind, versuchen, 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);
}
Er fragt, bis es keine autofill Elemente findet, Klone sie Daten und Ereignisse einschließlich, dann fügt sie in das DOM in der gleichen Position und entfernt das Original. Es hört auf Abruf, wenn es jeden zu Klon findet, da die Autofill manchmal eine Sekunde nach dem Laden der Seite erfolgt. Dies ist eine Variation eines vorherigen Codebeispiel, aber robuster und hält so viel Funktionalität intakt wie möglich.
(Bestätigte arbeitet in Chrome, Firefox und IE 8).
Das folgende CSS entfernt die gelbe Hintergrundfarbe und ersetzt sie durch eine Hintergrundfarbe Ihrer Wahl. Es ist nicht deaktivieren auto-fill und es erfordert keine jQuery oder Javascript-Hacks.
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: Aufschalten Browser Ausfüllen von Formularen und Eingabehervorhebung mit HTML / CSS
Für mich arbeiten, nur die CSS-Änderung erforderlich ist.
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #ffffff inset!important;
}
Sie eine beliebige Farbe anstelle von setzen können #ffffff .
Ein wenig hacky aber funktioniert perfekt für mich
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
Eine Kombination von Antworten für mich gearbeitet
<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>
Hier ist die Mootools Version von Jasons. Fixes es in Safari zu.
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);
}
});
Dies behebt das Problem sowohl auf Safari und 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);
}
Das half mir, ein CSS-Version.
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
Dabei steht weiß kann jede Farbe, die Sie wollen.
Ich benutze dies,
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 */
In Ihrem Tag, legen Sie einfach diese kleine Code-Zeile.
autocomplete="off"
Allerdings dürfen sie nicht durch diese in dem Benutzername / E-Mail / idName Feld, denn wenn Sie noch suchen, um den Einsatz der automatischen Vervollständigung, es es für dieses Feld deaktiviert wird. Aber ich fand einen Weg, um dieses, legen Sie einfach den Code in Ihrem Passwort-Eingabe-Tag, weil Sie nie die automatische Vervollständigung Passwörter sowieso. Dieses Update sollte die Farbkraft, matinain die automatische Vervollständigung Fähigkeit, auf Ihrem E-Mail / Benutzername Feld entfernen, und ermöglicht es Ihnen sperrige Hacks wie Jquery oder Javascript zu vermeiden.
Wenn Sie völlig loszuwerden, es zu bekommen, habe ich den Code in den vorangegangenen Antworten so eingestellt, dass es auf schweben arbeitet, aktiv und konzentrieren sich zu:
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:active, input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px white inset;
}
Hier ist eine Mootools Lösung, die das gleiche wie Alessandro tun -. 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);
});
}
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 sich die automatische Vervollständigung und auto-fill (so gelb Hintergründe verschwinden), wartet 100 Millisekunden ein, dann schaltet sich die Auto-Funktionalität zurück, ohne Auto-Fill.
Wenn Sie Eingänge haben, dass Bedarf automatisch gefüllt zu sein, dann sie auto-complete-on CSS-Klasse geben.
Keine der Lösungen für mich gearbeitet, die Benutzernamen und Passwort Eingaben wurden noch bevölkert ist und den gelben Hintergrund gegeben.
Also habe ich mich gefragt: „Wie Chrome bestimmen, was auf einer bestimmten Seite autofilled werden sollte?“
"Sieht es für die Eingabe-IDs, Eingangsnamen? Formular ids? Formularaktion?"
Durch meine Experimente mit dem Benutzernamen und dem Passwort-Eingänge, gab es nur zwei Möglichkeiten, fand ich, dass Chrome nicht in der Lage dazu führen würde, um die Felder zu finden, die autofilled werden sollte:
1) Setzen Sie die Passworteingabe vor der Texteingabe. 2) Geben Sie ihnen die gleichen Namen und id ... oder keinen Namen und ID.
Nachdem die Seite geladen wird, mit Javascript Sie entweder die Reihenfolge der Eingänge auf der Seite ändern können, oder dynamisch geben sie ihren Namen und id ...
Und Chrome nicht weiß, was es getroffen ... die automatische Vervollständigung Aufenthalte ab.
Crazy Hack, ich weiß. Aber es funktioniert für mich.
Chrome 34.0.1847.116, OSX 10.7.5
Der einzige Weg, das funktioniert für mich war: (jQuery erforderlich)
$(document).ready(function(e) {
if ($.browser.webkit) {
$('#input_id').val(' ').val('');
}
});
Ich reparierte dieses Problem für ein Passwort-Feld i wie diese:
Stellen Sie den Eingabetyp Text anstelle von Passwort
Nehmen Sie den Eingabetext Wert mit jQuery
Konvertieren Sie den Eingabetyp Passwort mit jQuery
<input type="text" class="remove-autofill">
$('.js-remove-autofill').val('');
$('.js-remove-autofill').attr('type', 'password');
Ein Update auf Arjans Lösung. Beim Versuch, die Werte zu ändern es würde Sie lassen. Dies funktioniert gut für mich. Wenn Sie an einem Eingang zu konzentrieren, dann wird es gelb gehen. seine nahe 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);});
Versuchen Sie diesen Code ein:
$(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">
fareed namrouti Antwort ist richtig. Aber der Hintergrund noch bekommt gelb, wenn der Eingang gewählt ist . Hinzufügen !important das Problem beheben. Wenn Sie auch textarea und select mit dem gleichen Verhalten möchte nur hinzufügen, textarea:-webkit-autofill, select:-webkit-autofill
Nur Eingabe
input:-webkit-autofill {
background-color: rgb(250, 255, 189) !important;
}
Eingabe wählen, Textbereich
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
background-color: rgb(250, 255, 189) !important;
}
autocomplete="off" Hinzufügen ist nicht gonna zu schneiden.
Ändern input type-Attribut auf type="search".
Google nicht auto-fill auf Eingaben mit einer Art der Suche anwenden.
Wenn Sie die gelben Flackern vermeiden wollen, bis Ihre css Schlag einen Übergang wie so auf diesem schlechten Jungen angewandt wird:
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset !important;
transition: background-color 10s ease-in-out 0s;
}
Die Endlösung:
$(document).ready(function(){
var contadorInterval = 0;
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();
setTimeout(function(){
// $("#User").val('');
$("#Password").val('');
},10);
});
}
contadorInterval++;
if(contadorInterval > 50) window.clearInterval(_interval); // stop polling
}, 20);
}else{
setTimeout(function(){
// $("#User").val('');
$("#Password").val('');
},100);
}
});
<input type="text" name="foo" autocomplete="off" />
ähnliche Frage: Link-
gefunden Nur mich mit der gleichen Frage. Dies funktioniert für mich:
form :focus {
outline: none;
}
