forme Google Chrome et son remplissage automatique de fond jaune

https://stackoverflow.com/questions/2920306

05-10-2019
|

Question

J'ai un problème de conception avec Google Chrome et sa fonction Remplissage automatique des formulaires. Si Chrome se souvient un certain login / mot de passe, il change une couleur de fond à un jaune.

Voici quelques captures d'écran:

text alt

Comment supprimer ce fond ou tout simplement désactiver cette fonction de remplissage automatique?

La solution

Modifier "blanc" à la couleur que vous voulez.

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

Autres conseils

Si vous voulez les gars des champs d'entrée transparents, vous pouvez utiliser la transition et le délai de transition.

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;
}

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);
        });
    });
}

Dans Firefox, vous pouvez désactiver toutes saisie semi-automatique sur un formulaire en utilisant le autocomplete = "off / on" attribut. De même les articles individuels autocomplete peut être réglé en utilisant le même attribut.

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

Vous pouvez tester cela dans Chrome comme il devrait fonctionner.

Si vous souhaitez conserver la saisie semi-automatique, ainsi que toutes les données, les gestionnaires et les fonctionnalités attachées attaché à vos éléments d'entrée, essayez ce script:

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);
}

Il interroge jusqu'à ce qu'il trouve des éléments de remplissage automatique, y compris les données clones les événements et, puis les insère dans les DOM au même endroit et supprime l'original. Il arrête l'interrogation une fois qu'il trouve tout à clone puisque le remplissage automatique prend parfois une seconde après chargement de la page. Ceci est une variante d'un exemple de code précédent, mais plus robuste et maintient que des fonctionnalités beaucoup plus intacte possible.

(Confirmé travaillant dans Chrome, Firefox et IE 8).

Le CSS suivant supprime la couleur de fond jaune et le remplace par une couleur d'arrière-plan de votre choix. Il ne auto-fill pas désactivé et il ne nécessite pas de hacks jQuery ou Javascript.

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;
}

Solution copiée à partir de: Override navigateur sous forme de remplissage et d'entrée mettant en surbrillance avec HTML / CSS

A travaillé pour moi, seul le changement nécessaire css.

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

vous pouvez mettre toutes les couleurs à la place de #ffffff .

Un peu hacky mais fonctionne parfaitement pour moi

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

Une combinaison de réponses a fonctionné pour moi

<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>

Voici la version de MooTools Jason. Corrige ce problème dans Safari aussi.

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);                                               


    }
});

résout le problème à la fois Safari et 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);
}

Cela m'a aidé, une seule version CSS.

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

où blanc peut être une couleur que vous voulez.

J'utiliser,

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 */

Dans votre balise, il suffit d'insérer cette petite ligne de code.

autocomplete="off"

Cependant, ne placez pas le nom d'utilisateur / email / champ idName parce que si vous êtes toujours à l'utilisation autocomplete, il désactivera pour ce domaine. Mais j'ai trouvé un moyen de contourner cela, il suffit de placer le code dans votre balise d'entrée de mot de passe parce que vous ne les mots de passe autocomplete de toute façon. Ce correctif devrait supprimer la force de la couleur, la capacité matinain autocomplete sur votre champ email / nom d'utilisateur et vous permet d'éviter hacks volumineux comme Jquery ou javascript.

Si vous voulez vous en débarrasser tout à fait, je l'ai ajusté le code dans les réponses précédentes il fonctionne sur le vol stationnaire, actif et se concentrer aussi:

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

Voici une solution Mootools faire la même chose que Alessandro de -. Remplace chaque entrée affectée par un nouveau

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);
    });
}

Qu'en est-il de cette solution:

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

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

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

Il se désactive l'auto-complet et remplissage automatique (arrière-plans si jaune disparaissent), attend 100 millisecondes un tourne alors la fonctionnalité de remplissage automatique de retour sans auto-remplissage.

Si vous avez des entrées qui ont besoin d'être rempli automatiquement, puis leur donner la classe auto-complete-on css.

Aucune des solutions de travail pour moi, les entrées de nom d'utilisateur et mot de passe étaient encore peuplé et compte tenu du fond jaune.

Alors je me suis demandé: « Comment déterminer Chrome ce qui devrait être autofilled sur une page donnée? »

"Est-il chercher ids d'entrée, les noms d'entrée? Ids de formulaire? Action du formulaire?"

Grâce à mon expérimentation avec le nom d'utilisateur et les entrées de mot de passe, il n'y avait que deux façons je trouve que causerait Chrome ne pas être en mesure de trouver les champs qui doivent être autofilled:

1) Mettre l'entrée de mot de passe avant la saisie de texte. 2) Donnez-leur du même nom et id ... ou pas de nom et id.

Après le chargement de la page, avec javascript vous pouvez modifier l'ordre des entrées sur la page, ou leur donner dynamiquement leur nom et leur id ...

Et Chrome ne sait pas ce qui a frappé ce ... séjours hors autocomplete.

bidouille fou, je sais. Mais il travaille pour moi.

Chrome 34.0.1847.116, Mac OS X 10.7.5

La seule façon qui fonctionne pour moi était: (jQuery nécessaire)

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

Je résolu ce problème pour un champ de mot de passe j'ai comme ceci:

Définissez le type d'entrée au texte au lieu de mot de passe

Supprimer la valeur de saisie de texte avec jQuery

Convertir le type d'entrée de mot de passe avec jQuery

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

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

Une mise à jour de solution Arjans. Lorsque vous essayez de changer les valeurs qu'il wouldnt vous laissez. Cela fonctionne bien pour moi. Lorsque vous vous concentrez sur une entrée, alors il sera jaune. son assez proche.

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

Essayez ce 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">

Fareed namrouti réponse est correcte. Mais l'arrière-plan jaunir encore quand l'entrée est sélectionnée . Ajout d'!important résoudre le problème. Si vous voulez aussi textarea et select avec le même comportement il suffit d'ajouter textarea:-webkit-autofill, select:-webkit-autofill

Entrée uniquement

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

entrée, sélectionner, textarea

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

Ajout autocomplete="off" ne va pas le couper.

Modifier attribut type d'entrée à type="search".
Google ne s'applique pas auto-remplissage aux entrées avec un type de recherche.

Espérons que cela vous permet d'économiser un certain temps.

Si vous voulez éviter le scintillement jaune jusqu'à ce que votre css est appliqué gifle une transition sur ce mauvais garçon comme ceci:

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

La solution finale:

$(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" />

Question similaire: lien

Juste me suis retrouvé avec la même question. Cela fonctionne pour moi:

form :focus {
  outline: none;
}

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow