Remplissage automatique du formulaire Google Chrome et son fond jaune

J'ai un problème de conception avec Google Chrome et sa fonction de remplissage automatique de formulaire. Si Chrome se souvient d'un identifiant / mot de passe, il change une couleur d'arrière-plan en jaune.

Voici quelques captures d'écran:

Comment supprimer cet arrière-plan ou simplement désactiver cette saisie automatique?

Changez "blanc" en n'importe quelle couleur que vous voulez.

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

Si vous voulez des champs de saisie 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;
}

Solution ici :

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 les saisies automatiques sur un formulaire en utilisant l'attribut autocomplete = "off / on". De même, la saisie semi-automatique des éléments individuels peut être définie à l'aide du même attribut.

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

Vous pouvez tester cela dans Chrome comme cela devrait fonctionner.

Si vous souhaitez conserver la saisie automatique, ainsi que toutes les données, les gestionnaires attachés et les fonctionnalités attachées à 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, les clone, y compris les données et les événements, puis les insère dans le DOM au même emplacement et supprime l'original. Il arrête d'interroger une fois qu'il a trouvé un clone, car le remplissage automatique prend parfois une seconde après le chargement de la page. Il s'agit d'une variante d'un exemple de code précédent, mais plus robuste et conserve autant de fonctionnalités intactes que possible.

(Fonctionnement confirmé dans Chrome, Firefox et IE 8.)

Le CSS suivant supprime la couleur d'arrière-plan jaune et la remplace par une couleur d'arrière-plan de votre choix. Il ne désactive pas le remplissage automatique et ne nécessite aucun piratage 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: remplacer le remplissage du formulaire du navigateur et la mise en surbrillance des entrées avec HTML / CSS

A fonctionné pour moi, seul le changement CSS requis.

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

vous pouvez mettre n'importe quelle couleur à 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 MooTools de Jason. Le corrige également dans 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);                                               


    }
});

Cela résout le problème sur 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 version CSS uniquement.

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

où le blanc peut être de n'importe quelle couleur.

J'utilise ça,

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, insérez simplement cette petite ligne de code.

autocomplete="off"

Cependant, ne placez pas cela dans le champ nom d'utilisateur / email / idname car si vous cherchez toujours à utiliser la saisie semi-automatique, cela le désactivera pour ce champ. Mais j'ai trouvé un moyen de contourner cela, placez simplement le code dans votre balise de saisie de mot de passe parce que vous ne complétez jamais automatiquement les mots de passe. Ce correctif devrait supprimer la force de couleur, la capacité de saisie semi-automatique du matinain dans votre champ de messagerie / nom d'utilisateur et vous permet d'éviter les hacks encombrants comme Jquery ou javascript.

Si vous voulez vous en débarrasser complètement, j'ai ajusté le code dans les réponses précédentes pour qu'il fonctionne aussi en survol, actif et concentré:

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 faisant la même chose qu'Alessandro - remplace chaque entrée affectée par une nouvelle.

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 désactive la saisie semi-automatique et le remplissage automatique (de sorte que les arrière-plans jaunes disparaissent), attend 100 millisecondes, puis rétablit la fonctionnalité de saisie semi-automatique sans remplissage automatique.

Si vous avez des entrées qui doivent être remplies automatiquement, donnez-leur la auto-complete-onclasse css.

Aucune des solutions n'a fonctionné pour moi, les entrées de nom d'utilisateur et de mot de passe étaient toujours renseignées et sur fond jaune.

Je me suis donc demandé: "Comment Chrome détermine-t-il ce qui doit être rempli automatiquement sur une page donnée?"

"Cherche-t-il les ID d'entrée, les noms d'entrée? ID de formulaire? Action de formulaire?"

Grâce à mon expérimentation avec le nom d'utilisateur et les entrées de mot de passe, je n'ai trouvé que deux façons qui empêcheraient Chrome de trouver les champs qui devraient être remplis automatiquement:

1) Placez la saisie du mot de passe avant la saisie de texte. 2) Donnez-leur le même nom et identifiant ... ou aucun nom et identifiant.

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

Et Chrome ne sait pas ce qui l'a frappé ... la saisie semi-automatique reste désactivée.

Hack fou, je sais. Mais ça marche pour moi.

Chrome 34.0.1847.116, OSX 10.7.5

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

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

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

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

Supprimer la valeur de texte saisie avec jQuery

Convertissez le type d'entrée en 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 la solution Arjans. Lorsque vous essayez de modifier les valeurs, cela ne vous laissera pas. Cela fonctionne bien pour moi. Lorsque vous vous concentrez sur une entrée, elle devient jaune. c'est 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">

la réponse de namrouti tarifée est correcte. Mais l'arrière-plan devient toujours jaune lorsque l'entrée est sélectionnée . L'ajout !importantcorrige le problème. Si vous voulez aussi textareaet selectavec le même comportement, ajoutez simplementtextarea:-webkit-autofill, select:-webkit-autofill

Entrée uniquement

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

entrée, sélection, zone de texte

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

L'ajout autocomplete="off"ne va pas le couper.

Remplacez l'attribut de type d'entrée par type="search".
Google n'applique pas le remplissage automatique aux entrées avec un type de recherche.

J'espère que cela vous fera gagner du temps.

Si vous voulez éviter le scintillement jaune jusqu'à ce que votre CSS soit appliqué, appliquez 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

Je viens de me retrouver avec la même question. Cela fonctionne pour moi:

form :focus {
  outline: none;
}