Remplissage automatique de formulaire Google Chrome et son arrière-plan jaune
J'ai un problème de conception avec Google Chrome et sa fonction de remplissage automatique de la forme . Si Chrome se souvient de certains identifiants/mots de passe, il change la couleur de fond en jaune.
Voici quelques captures d'écran:
Comment supprimer cet arrière-plan ou simplement désactiver ce remplissage automatique?
Changer "blanc" à 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 une transition et un 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 tous les compléments automatiques d'un formulaire à l'aide de l'attribut autocomplete = "off/on". De même, les éléments individuels autocomplete peuvent être définis 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 se doit.
Si vous souhaitez conserver le remplissage automatique, ainsi que 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 cesse d'interroger une fois qu'il a trouvé un élément à cloner, 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 qui conserve autant de fonctionnalités que possible.
(Utilisation confirmée dans Chrome, Firefox et IE 8.)
La CSS suivante supprime la couleur de fond jaune et la remplace par une couleur de fond 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: Ignorer le remplissage du formulaire par le navigateur et la surbrillance des entrées avec HTML/CSS
Travaillé 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;
}
Cela corrige le problème à la fois 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);
}
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>
J'utilise ceci
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 */
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 m'a aidé, une version uniquement CSS.
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
où white peut être la couleur de votre choix.
Dans votre tag, insérez simplement cette petite ligne de code.
autocomplete="off"
Cependant, ne placez pas ceci 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 ce problème, il suffit de placer le code dans votre balise de saisie de mot de passe car vous ne complétez jamais de manière automatique les mots de passe. Ce correctif devrait supprimer la force de couleur, la capacité de complétion automatique du matin sur votre champ email/nom d'utilisateur, et vous permet d'éviter les hacks volumineux comme Jquery ou javascript.
Si vous voulez vous en débarrasser entièrement, j'ai ajusté le code dans les réponses précédentes pour qu'il fonctionne en survol, actif et aussi au focus:
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:active, input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px white inset;
}
La seule façon qui fonctionne pour moi était: (jQuery required)
$(document).ready(function(e) {
if ($.browser.webkit) {
$('#input_id').val(' ').val('');
}
});
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">Voici une solution Mootools fonctionnant comme 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);
});
}
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 du texte d'entrée avec jQuery
Convertir 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 le permet pas. Cela fonctionne bien pour moi. Lorsque vous vous concentrez sur une entrée, elle passe au 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);});
fareed namrouti réponse est correcte. Mais le fond devient toujours jaune lorsque l'entrée est sélectionnée . L'ajout de !important corrige le problème. Si vous voulez aussi textarea et select avec le même comportement, ajoutez simplement textarea:-webkit-autofill, select:-webkit-autofill
Seule entrée
input:-webkit-autofill {
background-color: rgb(250, 255, 189) !important;
}
entrée, sélectionnez, textarea
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
background-color: rgb(250, 255, 189) !important;
}
Si vous voulez éviter le scintillement jaune jusqu'à ce que votre css soit appliqué, claquez 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;
}
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 et le remplissage automatiques (les fonds jaunes disparaissent), attend 100 millisecondes, puis rétablit la fonctionnalité de saisie automatique sans remplissage automatique.
Si vous avez des entrées à remplir automatiquement, donnez-leur auto-complete-on css class.
Aucune des solutions ne fonctionnait pour moi, les entrées de nom d'utilisateur et de mot de passe étaient toujours en cours de remplissage et avaient un arrière-plan jaune.
Je me suis donc demandé: "Comment Chrome détermine-t-il ce qui doit être rempli automatiquement sur une page donnée?"
"Est-ce qu'il recherche les identifiants d'entrée, les noms d'entrée? Identifiants de formulaire? Action de formulaire?"
Lors de mes expériences avec les entrées de nom d'utilisateur et de mot de passe, il n'y avait que deux façons pour que Chrome ne puisse pas trouver les champs à remplir automatiquement:
1) Placez le mot de passe avant le texte . 2) Donnez-leur le même nom et le même identifiant ... ou pas de nom et id.
Une fois la page chargée, javascript vous permet de modifier l’ordre des entrées de la page ou de leur attribuer dynamiquement leur nom et leur identifiant ...
Et Chrome ne sait pas ce qui se passe ... La saisie semi-automatique reste désactivée.
Fou hack, je sais. Mais ça marche pour moi.
Chrome 34.0.1847.116, OSX 10.7.5
Ajouter autocomplete="off" ne va pas le couper.
Changez l'attribut du type d'entrée en type="search".
Google n'applique pas le remplissage automatique aux entrées avec un type de recherche.
J'espère que cela vous fait gagner du temps.