Override navigateur sous forme de remplissage et d'entrée mettant en surbrillance avec HTML / CSS
https://stackoverflow.com/questions/2338102
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
J'ai 2 formes de base - connexion et inscrivez-vous, à la fois sur la même page. Maintenant, je n'ai aucun problème avec le signe sous forme d'auto-remplissage, mais l'auto formulaire d'inscription remplit aussi bien, et je ne l'aime pas.
En outre, les styles de forme obtenir un fond jaune que je ne peux pas réussir à passer outre et je ne veux pas utiliser les CSS en ligne pour le faire. Que puis-je faire pour les faire cesser d'être de couleur jaune et (éventuellement) le remplissage automatique ? Merci d'avance!
La solution
pour la saisie semi-automatique, 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) # id-styles sont encore plus importants que .class styles, les peut travail:
#inputId:-webkit-autofill {
background-color: white !important;
}
2) si cela ne fonctionne pas, vous pouvez essayer de définir le style via javascript programme
$("input[type='text']").bind('focus', function() {
$(this).css('background-color', 'white');
});
3) si cela ne fonctionne pas, vous êtes condamné: -) considérez ceci:
cette coutume cacher la couleur jaune, mais fera à nouveau le texte lisible.
input:-webkit-autofill {
color: #2a2a2a !important;
}
4) un css / solution javascript:
css:
input:focus {
background-position: 0 0;
}
et le javascript suivant doit être exécuté onload:
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 éléments ci-dessus travaux essayez de supprimer les entrées, les clonant, puis en plaçant les éléments clonés en arrière sur la page (fonctionne sur 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>
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);
});
});
}
Autres conseils
bidouiller avec une "forte" à l'intérieur 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: 0 0 0 50px white inset;/*your box-shadow*/
-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">
Quasiment tous les navigateurs modernes respecteront cela.
Après 2 heures de recherche, il semble Google Chrome remplace toujours la couleur jaune en quelque sorte, mais je l'ai trouvé le correctif. Il travaillera pour vol stationnaire, etc. ainsi se concentrer. Tout ce que vous avez à faire est d'ajouter !important à elle.
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;
}
supprime complètement la couleur jaune des champs d'entrée
Vous pouvez également modifier l'attribut name de vos éléments de formulaire à quelque chose généré afin que le navigateur ne conservera aucune trace de celui-ci. CEPENDANT Firefox 2.x + et Google Chrome semble ne pas avoir beaucoup de problèmes avec que si l'URL de requête est identique. Essayez essentiellement l'ajout d'une demande de sel et un nom param champ de sel pour la forme d'inscription.
Cependant, je pense que autocomplete = "off" est toujours supérieure solution:)
Vous pouvez désactiver l'auto-complétion à partir de HTML5 (via autocomplete="off"), mais vous ne pouvez pas remplacer la mise en évidence du navigateur. Vous pouvez essayer de jouer avec ::selection en CSS (la plupart des navigateurs ont besoin d'un préfixe de fournisseur pour que le travail), mais sans doute ne vous aidera pas non plus.
À moins que le fournisseur du navigateur mis en œuvre spécifiquement d'une manière spécifique au fournisseur de passer outre, vous ne pouvez rien faire au sujet de ces styles qui sont déjà destinés à remplacer la feuille de style du site pour l'utilisateur. Ceux-ci sont généralement appliqués après vos feuilles de style sont appliqués et ne tiennent pas compte des remplacements ! important aussi.
Parfois le navigateur saisie semi-automatique autocompletes encore lorsque vous avez juste le code dans l'élément <form>.
J'ai essayé de le mettre dans l'élément <input> aussi bien et cela a fonctionné mieux.
<form autocomplete="off"> AND <input autocomplete="off">
Prise en charge de cet attribut est cependant CESSATION DE, s'il vous plaît lire https://bugzilla.mozilla.org/show_bug.cgi?id=956906# c1
https://bugzilla.mozilla.org/show_bug.cgi?id=956906
Un autre travail autour que j'ai trouvé est en train de sortir des espaces réservés à l'intérieur des champs d'entrée qui suggèrent qu'il est un e-mail, nom d'utilisateur ou d'un champ de téléphone (par exemple. « Votre Email », « E-mail », etc. »)
fait en sorte que les navigateurs ne savent pas quel genre de terrain, il est donc ne pas essayer de saisie semi-automatique, il.
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);
}
S'il est dans le champ de saisie que vous essayez de « un jaune » ...
- Définir une couleur de fond avec css ... disons #ccc (gris clair).
- Ajouter value = "someText", qui remplit temporairement le terrain avec "someText"
- (facultatif) Ajouter un peu de javascript pour faire le « someText » clair quand vous allez mettre le texte réel.
Alors, il 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='';" />
La capture d'écran vous avez accédé à dit que WebKit utilise le sélecteur input:-webkit-autofill pour ces éléments. Avez-vous essayé de mettre dans votre CSS?
input:-webkit-autofill {
background-color: white !important;
}
Si cela ne fonctionne pas, alors rien ne sera probablement. Ces champs sont mis en évidence pour alerter l'utilisateur qu'ils ont été autofilled avec des informations privées (telles que l'adresse de l'utilisateur) et il pourrait faire valoir qu'autoriser une page pour cacher qui est ce qui permet un risque de sécurité.
L'élément form a un attribut autocomplete que vous pouvez définir à off. À la CSS la directive !important après une propriété, il empêche d'être overriden:
background-color: white !important;
Seul IE6 ne comprend pas.
Si je vous ai mal compris, il y a aussi la propriété outline que vous pourriez trouver utile.
Je l'ai vu saisie semi-automatique de Google toolbar désactivé avec javascript. Il pourrait travailler avec d'autres outils de remplissage automatique; Je ne sais pas si ça vous aidera avec les navigateurs intégrés 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>
Après avoir essayé beaucoup de choses, je trouve des solutions de travail qui NuKed les champs autofilled et les a remplacés par dupliquée. Sans perdre événements attachés, je suis venu avec un autre (un peu long) solution.
A chaque événement « d'entrée » qu'il attache rapide des événements « changement » à toutes les entrées concernées. Il teste si elles ont été autofilled. Si oui, envoyer un nouvel événement de texte qui duper le navigateur pour penser que la valeur a été modifiée par l'utilisateur, permettant ainsi de supprimer le fond 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);
}
});
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 );
entrée Clone, réinitialiser attribut et cacher l'entrée d'origine. Délai d'attente est nécessaire pour iPad
Depuis le navigateur recherche des champs de type de 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' />
Je l'ai lu tant de fils et essayer tant de morceaux de code. Après avoir recueilli toutes ces choses, la seule façon que je trouve à proprement vider les champs de connexion et mot de passe et réinitialiser leur arrière-plan blanc a été le suivant:
$(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);
});
Ne hésitez pas à commenter, je suis ouvert à toutes les améliorations si vous en trouvez.
Autocomplete off ne sont pas pris en charge par les navigateurs modernes. La meilleure façon de résoudre autocomplete j'ai trouvé un petit chemin avec HTML et JS. La première chose à faire est de changer le type de l'entrée en HTML du « mot de passe » à « texte ».
<input class="input input-xxl input-watery" type="text" name="password"/>
Autocomplete commence après la fenêtre chargée. C'est bon. Mais quand n `savoir quels champs il doit remplir le type de votre champ n'est pas « mot de passe », navigateur. Donc, il n'y aura pas autocomplete sur les champs de formulaire.
Après cela, l'événement se lier focusIn au champ de mot de passe, par ex. dans Backbone:
'focusin input[name=password]': 'onInputPasswordFocusIn',
Dans onInputPasswordFocusIn, il suffit de changer le type de votre champ de mot de passe, par simple vérification:
if (e.currentTarget.value === '') {
$(e.currentTarget).attr('type', 'password');
}
That`s it!
UPD: cette chose ne fonctionne pas avec JavaSciprt désactivé
UPD en 2018. On trouve également un truc drôle. Définir l'attribut lecture seule au champ de saisie, et retirez-le sur l'événement de mise au point. empêcher premier navigateur de champs remplissage automatique, la deuxième permettra aux données d'entrée.
Pourquoi ne pas simplement mettre dans votre css:
input --webkit-autocomplete {
color: inherit;
background: inherit;
border: inherit;
}
Cela devrait prendre soin de votre question. Bien qu'il soulève une question de facilité d'utilisation, car maintenant l'utilisateur ne peut pas voir que la forme était autofilled dans la façon dont il / elle est utilisée pour.
[modifier] Après avoir affiché ce que j'ai vu qu'une réponse semblable a déjà été donné et que vous avez dit à ce que cela ne fonctionnait pas. Je ne vois pas pourquoi, parce que cela a fonctionné quand je l'ai testé.
Le vrai problème ici est que Webkit (Safari, Chrome, ...) a un bug. Quand il y a plus d'un [formulaire] sur la page, chacun avec un (par exemple avec la même valeur pour l'attribut « name ») [input type = « text » name = « foo » ...], puis lorsque l'utilisateur revient à la page la saisie semi-automatique se fera dans le champ de saisie de la première [forme] sur la page, et non pas dans la [forme] qui a été envoyé. La deuxième fois, la prochaine [formulaire] sera autofilled, et ainsi de suite. Seule [forme] avec un champ de saisie de texte avec le même nom sera affectée.
Il doit être signalé aux développeurs de Webkit.
Opera AutoFills le droit [formulaire].
Firefox et IE ne pas remplir automatiquement.
Alors, je le répète: ce bogue dans Webkit
.