Remplacer le remplissage du formulaire par le navigateur et la surbrillance des entrées avec HTML/CSS
J'ai 2 formulaires de base - vous connecter et vous inscrire, les deux sur la même page. Maintenant, je n'ai aucun problème avec le remplissage automatique du formulaire d'inscription, mais le formulaire d'inscription se remplit automatiquement aussi et je ne l'aime pas.
De plus, les styles de formulaire ont un fond jaune que je ne parviens pas à remplacer et que je ne veux pas utiliser de CSS en ligne pour le faire. Que puis-je faire pour qu'ils cessent d'être colorés en jaune et (éventuellement) remplissage automatique? Merci d'avance!
pour l'auto-complétion, vous pouvez utiliser:
<form autocomplete="off">
en ce qui concerne le problème de coloration:
de votre capture d'écran, je peux voir que webkit génère le style suivant:
input:-webkit-autofill {
background-color: #FAFFBD !important;
}
1) comme # id-styles sont encore plus importants que les styles .class, les peuvent suivants fonctionnent:
#inputId:-webkit-autofill {
background-color: white !important;
}
2) si cela ne fonctionne pas, vous pouvez essayer de définir le style via javascript par programmation
$("input[type='text']").bind('focus', function() {
$(this).css('background-color', 'white');
});
3) si ça ne marche pas, vous êtes condamné :-) Considérez ceci: Cela ne cachera pas la couleur jaune, mais rendra le texte lisible à nouveau.
input:-webkit-autofill {
color: #2a2a2a !important;
}
4) une solution css/javascript:
css:
input:focus {
background-position: 0 0;
}
et le javascript suivant doit être exécuté à la charge:
function loadPage()
{
if (document.login)//if the form login exists, focus:
{
document.login.name.focus();//the username input
document.login.pass.focus();//the password input
document.login.login.focus();//the login button (submitbutton)
}
}
par exemple:
<body onload="loadPage();">
bonne chance :-)
5) Si aucun des travaux ci-dessus ne tente de supprimer les éléments d'entrée, de les cloner, puis de replacer les éléments clonés sur la page (fonctionne sous Safari 6.0.3):
<script>
function loadPage(){
var e = document.getElementById('id_email');
var ep = e.parentNode;
ep.removeChild(e);
var e2 = e.cloneNode();
ep.appendChild(e2);
var p = document.getElementById('id_password');
var pp = p.parentNode;
pp.removeChild(p);
var p2 = p.cloneNode();
pp.appendChild(p2);
}
document.body.onload = loadPage;
</script>
6) De 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);
});
});
}
Trick it avec une "forte" à l'intérieur de l'ombre:
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;
}
Ajoutez cette règle CSS et la couleur de fond jaune disparaîtra. :)
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
<form autocomplete="off">
Pratiquement tous les navigateurs modernes respecteront cela.
Après 2 heures de recherche, Google Chrome semble toujours remplacer la couleur jaune, mais j'ai trouvé le correctif. Cela fonctionnera également pour le vol stationnaire, la mise au point, etc. Tout ce que vous avez à faire est d’ajouter !important.
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0px 1000px white inset !important;
}
cela supprimera complètement la couleur jaune des champs de saisie
Vous pouvez également modifier l'attribut name de vos éléments de formulaire afin qu'il soit généré afin que le navigateur n'en garde pas trace. Cependant, Firefox 2.x + et Google Chrome ne semblent pas avoir beaucoup de problèmes avec cela si l'URL de la demande est identique. Essayez en gros d'ajouter un paramètre de demande de sel et un nom de champ de sel pour le formulaire d'inscription.
Cependant, je pense que autocomplete = "off" est toujours la meilleure solution :)
Parfois, l'auto-complétion sur le navigateur reste encore auto-complétée lorsque vous avez juste le code dans l'élément <form>.
J'ai aussi essayé de le mettre dans l'élément <input> et cela a mieux fonctionné.
<form autocomplete="off"> AND <input autocomplete="off">
La prise en charge de cet attribut cesse toutefois, veuillez lire https://bugzilla.mozilla.org/show_bug.cgi?id=956906#c1
https://bugzilla.mozilla.org/show_bug.cgi?id=956906
Une autre solution que j'ai trouvée consiste à supprimer des espaces réservés dans les champs de saisie, suggérant qu'il s'agit d'un email, d'un nom d'utilisateur ou d'un champ téléphonique (par exemple, "Votre email", "Email", etc. ").
Cela fait en sorte que les navigateurs ne sachent pas de quel type de champ il s'agit et n'essayent donc pas de le compléter automatiquement.
Vous pouvez désactiver la saisie automatique à partir de HTML5 (via autocomplete="off"), mais vous ne pouvez PAS annuler la mise en surbrillance du navigateur. Vous pouvez essayer de jouer avec ::selection en CSS (la plupart des navigateurs requièrent un préfixe de fournisseur pour que cela fonctionne), mais cela ne vous aidera probablement pas non plus.
À moins que le fournisseur du navigateur ait spécifiquement implémenté un moyen spécifique de le remplacer, vous ne pouvez rien faire à propos de ces styles qui sont déjà conçus pour remplacer la feuille de style du site pour l'utilisateur. Celles-ci sont généralement appliquées après l'application de vos feuilles de style et ignorent également les remplacements ! important.
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);
}
Si c'est dans le champ de saisie, vous essayez de "désactiver le jaune" ...
- Définissez une couleur de fond avec css ... disons #ccc (gris clair).
- Add value = "sometext", qui remplit temporairement le champ avec "sometext"
- (facultatif) Ajoutez un peu de javascript pour que le "sometext" soit clair lorsque vous allez placer le texte réel.
Donc, cela pourrait ressembler à ceci:
<input id="login" style="background-color: #ccc;" value="username"
onblur="if(this.value=='') this.value='username';"
onfocus="if(this.value=='username') this.value='';" />
Solution javascript simple pour tous les navigateurs:
setTimeout(function() {
$(".parent input").each(function(){
parent = $(this).parents(".parent");
$(this).clone().appendTo(parent);
$(this).attr("id","").attr("name","").hide();
});
}, 300 );
Cloner une entrée, réinitialiser un attribut et masquer l'entrée d'origine
Puisque le navigateur recherche les champs de type mot de passe, une autre solution consiste à inclure un champ caché au début de votre formulaire:
<!-- unused field to stop browsers from overriding form style -->
<input type='password' style = 'display:none' />
La complétion automatique désactivée n'est pas prise en charge par les navigateurs modernes. Le moyen le plus simple de résoudre la saisie semi-automatique que j'ai trouvée était une petite piste avec HTML et JS . La première chose à faire est de changer le type de l'entrée HTML de "mot de passe" à "texte".
<input class="input input-xxl input-watery" type="text" name="password"/>
La saisie semi-automatique commence après le chargement de la fenêtre. C'est bon. Mais lorsque le type de votre champ n’est pas "mot de passe", le navigateur ne sait pas quels champs il doit remplir. Donc, il n'y aura pas de saisie semi-automatique sur les champs de formulaire.
Après cela, liez l'événement focusin au champ de mot de passe, par exemple. dans l'épine dorsale:
'focusin input[name=password]': 'onInputPasswordFocusIn',
Dans onInputPasswordFocusIn, il suffit de changer le type de votre champ en mot de passe, par simple vérification:
if (e.currentTarget.value === '') {
$(e.currentTarget).attr('type', 'password');
}
Ça y est!
UPD: cette chose ne fonctionne pas avec JavaSciprt désactivé
UPD en 2018. Également trouvé une astuce amusante. Définissez l'attribut readonly sur le champ d'entrée et supprimez-le de l'événement focus. Premièrement, empêcher le navigateur de remplir automatiquement les champs, ensuite, permettre la saisie de données.
Après avoir essayé beaucoup de choses, j’ai trouvé des solutions fonctionnelles qui nuisent aux champs remplis automatiquement et les remplacent par des doublons. Pour ne pas perdre les événements liés, j'ai proposé une autre solution (un peu longue).
À chaque événement "input", il associe rapidement les événements "change" à toutes les entrées concernées. Il teste si elles ont été remplies automatiquement. Si tel est le cas, envoyez un nouvel événement texte qui incitera le navigateur à penser que la valeur a été modifiée par l'utilisateur, permettant ainsi de supprimer l'arrière-plan jaune.
var initialFocusedElement = null
, $inputs = $('input[type="text"]');
var removeAutofillStyle = function() {
if($(this).is(':-webkit-autofill')) {
var val = this.value;
// Remove change event, we won't need it until next "input" event.
$(this).off('change');
// Dispatch a text event on the input field to trick the browser
this.focus();
event = document.createEvent('TextEvent');
event.initTextEvent('textInput', true, true, window, '*');
this.dispatchEvent(event);
// Now the value has an asterisk appended, so restore it to the original
this.value = val;
// Always turn focus back to the element that received
// input that caused autofill
initialFocusedElement.focus();
}
};
var onChange = function() {
// Testing if element has been autofilled doesn't
// work directly on change event.
var self = this;
setTimeout(function() {
removeAutofillStyle.call(self);
}, 1);
};
$inputs.on('input', function() {
if(this === document.activeElement) {
initialFocusedElement = this;
// Autofilling will cause "change" event to be
// fired, so look for it
$inputs.on('change', onChange);
}
});
La capture d'écran à laquelle vous avez accédé indique que WebKit utilise le sélecteur input:-webkit-autofill pour ces éléments. Avez-vous essayé de mettre cela dans votre CSS?
input:-webkit-autofill {
background-color: white !important;
}
Si cela ne fonctionne pas, alors rien ne le fera probablement. Ces champs sont mis en surbrillance pour alerter l’utilisateur qu’ils ont été renseignés automatiquement avec des informations privées (telles que l’adresse personnelle de l’utilisateur) et que l’on pourrait soutenir que le fait de masquer une page constitue un risque pour la sécurité.
L'élément form a un attribut autocomplete que vous pouvez définir sur off. En CSS, la directive !important après qu'une propriété l'empêche d'être remplacée:
background-color: white !important;
Seul IE6 ne le comprend pas.
Si je vous ai mal compris, vous trouverez également la propriété outline qui pourrait vous être utile.
J'ai vu la fonctionnalité de saisie semi-automatique de la barre d'outils Google désactivée avec javascript. Cela pourrait fonctionner avec d'autres outils de remplissage automatique; Je ne sais pas si cela aidera avec les navigateurs intégrés à la saisie semi-automatique.
<script type="text/javascript"><!--
if(window.attachEvent)
window.attachEvent("onload",setListeners);
function setListeners(){
inputList = document.getElementsByTagName("INPUT");
for(i=0;i<inputList.length;i++){
inputList[i].attachEvent("onpropertychange",restoreStyles);
inputList[i].style.backgroundColor = "";
}
selectList = document.getElementsByTagName("SELECT");
for(i=0;i<selectList.length;i++){
selectList[i].attachEvent("onpropertychange",restoreStyles);
selectList[i].style.backgroundColor = "";
}
}
function restoreStyles(){
if(event.srcElement.style.backgroundColor != "")
event.srcElement.style.backgroundColor = "";
}//-->
</script>
J'ai lu tellement de discussions et essayé beaucoup de codes . Après avoir rassemblé tout cela, la seule façon pour moi de vider proprement les champs de login et de mot de passe et de réinitialiser leur arrière-plan en blanc était la suivante:
$(window).load(function() {
setTimeout(function() {
$('input:-webkit-autofill')
.val('')
.css('-webkit-box-shadow', '0 0 0px 1000px white inset')
.attr('readonly', true)
.removeAttr('readonly')
;
}, 50);
});
N'hésitez pas à commenter, je suis ouvert à toutes les améliorations si vous en trouvez.