Ignorer le remplissage de formulaire du navigateur et la mise en évidence des entrées avec HTML / CSS

J’ai 2 formulaires de base – connectez-vous et inscrivez-vous sur la même page. Maintenant, je n’ai aucun problème avec le remplissage automatique du formulaire mais le formulaire d’inscription se remplit aussi, et je ne l’aime pas.

En outre, les styles de formulaire ont un arrière-plan jaune que je ne parviens pas à remplacer et je ne veux pas utiliser de CSS en ligne pour le faire. Que puis-je faire pour les faire cesser d’être colorés en jaune et (éventuellement) remplissage automatique ? Merci d’avance!

pour l’auto-complétion, vous pouvez utiliser:

en ce qui concerne le problème de coloration:

à partir 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, ce qui suit peut fonctionner:

 #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 cela ne fonctionne pas, vous êtes condamné 🙂 considérez ceci: cela ne masquera pas la couleur jaune, mais rendra le texte à nouveau lisible.

 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é en 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:

  

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 sur Safari 6.0.3):

  

6) D’ 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); }); }); } 

Tromper avec une “forte” ombre intérieure:

 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 d’arrière-plan jaune disparaîtra. 🙂

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

Presque tous les navigateurs modernes respecteront cela.

Après deux heures de recherche, il semble que Google Chrome ne modifie pas la couleur jaune, mais j’ai trouvé le correctif. Cela fonctionnera aussi bien pour le vol stationnaire, la mise au point, etc. Tout ce que vous avez à faire est d’append !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’atsortingbut name de vos éléments de formulaire pour qu’il soit généré afin que le navigateur ne le garde pas en mémoire. Cependant, firefox 2.x + et google chrome semblent ne pas avoir beaucoup de problèmes avec cette URL si la requête est identique. Essayez essentiellement d’append 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’autocomplétion sur le navigateur est toujours terminée automatiquement lorsque vous avez simplement le code dans l’élément

.

J’ai aussi essayé de le placer dans l’élément et cela a fonctionné mieux.

 
AND

La prise en charge de cet atsortingbut est toutefois interrompue, veuillez consulter https://bugzilla.mozilla.org/show_bug.cgi?id=956906#c1

https://bugzilla.mozilla.org/show_bug.cgi?id=956906


Un autre travail que j’ai trouvé consiste à supprimer les espaces réservés à l’intérieur des champs de saisie qui suggèrent qu’il s’agit d’un courrier électronique, d’un nom d’utilisateur ou d’un champ téléphonique (par exemple, “Votre Email”, “Email”, etc.)

entrer la description de l'image ici

Cela fait en sorte que les navigateurs ne savent pas quel type de champ c’est, donc n’essaie pas de le compléter automatiquement.

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 pourriez essayer de jouer avec ::selection en CSS (la plupart des navigateurs nécessitent un préfixe de fournisseur pour que cela fonctionne), mais cela ne vous aidera probablement pas non plus.

À moins que le fournisseur du navigateur n’ait spécifiquement implémenté une méthode spécifique pour le remplacer, vous ne pouvez rien faire contre ces styles qui sont déjà destinés à remplacer la feuille de style du site pour l’utilisateur. Celles-ci sont généralement appliquées une fois que vos feuilles de style sont appliquées et ignorées ! important ! important dérogations ! important aussi.

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

Si c’est dans le champ de saisie, vous essayez de “non-jaune” …

  1. Définissez une couleur d’arrière-plan avec css … disons #ccc (gris clair).
  2. Ajouter valeur = “sometext”, qui remplit temporairement le champ avec “sometext”
  3. (facultatif) Ajoutez un petit javascript pour rendre le “sometext” plus clair lorsque vous mettez le vrai texte.

Donc, ça pourrait ressembler à ceci:

  

La capture d’écran que vous avez liée indique que WebKit utilise l’ input:-webkit-autofill du 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 va probablement. Ces champs sont mis en surbrillance pour avertir l’utilisateur qu’ils ont été renseignés automatiquement avec des informations privées (telles que l’adresse du domicile de l’utilisateur) et on pourrait soutenir que le fait de permettre à une page de se cacher autorise un risque de sécurité.

L’élément form a un atsortingbut autocomplete que vous pouvez définir sur off . En tant que CSS, la directive !important après 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, il y a aussi la propriété de outline que vous pourriez trouver 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 ça va aider avec les navigateurs intégrés en autocomplétion.

  

Après avoir essayé beaucoup de choses, j’ai trouvé des solutions fonctionnelles qui nuquaient les champs à remplissage automatique et les remplaçaient par des doublons. Pour ne pas perdre les événements attachés, je suis venu avec une autre solution (un peu longue).

À chaque événement “d’entrée”, il associe rapidement des événements “de modification” à toutes les entrées impliquées. Il teste s’ils ont été remplis automatiquement. Si oui, alors envoyez un nouvel événement texte qui fera croire au navigateur 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 sortingck 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 ); 

Cloner l’entrée, réinitialiser l’atsortingbut et masquer l’entrée d’origine. Timeout est nécessaire pour iPad

Comme le navigateur recherche les champs de type mot de passe, une autre solution consiste à inclure un champ masqué au début de votre formulaire:

   

J’ai lu tellement de discussions et essayé tant de morceaux de code. Après avoir rassemblé tous ces éléments, la seule façon de vider proprement les champs de connexion 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.

La saisie 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é était une petite piste avec HTML et JS. La première chose à faire est de changer le type de saisie en HTML de «mot de passe» en «texte».

  

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 savait pas quels champs il devait remplir. Il n’y aura donc pas de saisie semi-automatique sur les champs de formulaire.

Ensuite, liez event focus au champ password, par ex. dans Backbone:

 'focusin input[name=password]': 'onInputPasswordFocusIn', 

Dans onInputPasswordFocusIn , changez simplement le type de votre champ en mot de passe, par simple vérification:

 if (e.currentTarget.value === '') { $(e.currentTarget).attr('type', 'password'); } 

C’est ça!

UPD: cette chose ne fonctionne pas avec JavaSciprt désactivé

UPD en 2018. A également trouvé un truc amusant. Définissez l’atsortingbut readonly sur le champ de saisie et supprimez-le sur l’événement focus. Tout d’abord, empêchez le navigateur de remplir automatiquement les champs, le second permettra d’entrer des données.

Le vrai problème est que Webkit (Safari, Chrome, …) a un bug. Lorsqu’il y a plus d’un [formulaire] sur la page, chacun avec un [input type = “text” name = “foo” …] (c’est-à-dire avec la même valeur pour l’atsortingbut “name”), puis quand l’utilisateur retourne à la page, le remplissage automatique se fera dans le champ de saisie du premier [formulaire] de la page, et non dans le [formulaire] envoyé. La deuxième fois, le NEXT [formulaire] sera rempli automatiquement, etc. Seul [form] avec un champ de saisie avec le même nom sera affecté.

Cela devrait être signalé aux développeurs Webkit.

Opera remplit automatiquement le bon [formulaire].

Firefox et IE ne remplissent pas automatiquement.

Donc, je le répète: c’est un bug dans Webkit.

Pourquoi ne pas simplement mettre cela dans votre css:

 input --webkit-autocomplete { color: inherit; background: inherit; border: inherit; } 

Cela devrait prendre soin de votre problème. Bien que cela pose un problème de convivialité, l’utilisateur ne voit plus que le formulaire a été rempli comme il le fait habituellement.

[edit] Après avoir posté ceci, j’ai vu qu’une réponse similaire avait déjà été donnée et que vous l’aviez commentée, cela ne fonctionnait pas. Je ne vois pas très bien pourquoi parce que ça a marché quand je l’ai testé.