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

139

J'ai 2 formulaires de base - connectez-vous et inscrivez-vous, tous deux sur la même page. Maintenant, je n'ai aucun problème avec le remplissage automatique du formulaire de connexion,mais le formulaire d'inscription se remplit également automatiquement, et je n'aime pas ça.

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

html css input autofill casraf
la source
4
Vous vous posez vraiment deux questions ici: Comment désactiver le remplissage automatique des formulaires? -ET- Comment remplacer l'arrière-plan jaune lorsque le remplissage automatique du formulaire est activé? Ce n'était pas clair jusqu'à ce que j'ai lu tous les commentaires dans les réponses ci-dessous. Vous voudrez peut-être envisager de modifier votre question (d'autant plus que vous êtes allé jusqu'à offrir une prime).
benzado
Vous avez raison, édité. Ou une version paresseuse de toute façon.
casraf
1
En tant qu'utilisateur du formulaire, je détesterais que ma convivialité soit paralysée à cause de vos préférences visuelles en forçant la saisie automatique et la mise en évidence. Laissez l'utilisateur désactiver cette option, pas vous. Laissez mon expérience de navigation tranquille.
Byran Zaugg
C'est le problème, je n'ai désactivé la saisie semi-automatique que dans le formulaire INSCRIPTION, qui ne devrait pas avoir de saisie semi-automatique régulière, les informations d'achèvement ne sont créées qu'une fois que vous vous êtes inscrit. En ce qui concerne le formulaire de connexion, je souhaite conserver la saisie semi-automatique, mais désactivez simplement la couleur stupide qu'il met sur les champs de saisie car le texte à l'intérieur devient illisible - l'arrière-plan est jaune et la couleur du texte est blanche (l'arrière-plan d'origine est gris foncé) .
casraf
1
duplication possible du remplissage automatique du formulaire Google Chrome et de son fond jaune
zzzzBov

Réponses:

163

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

<form autocomplete="off">

concernant le problème de coloration:

à partir de votre capture d'écran, je peux voir que le kit Web 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 cachera 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é lors du chargement:

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 aucune des solutions ci-dessus ne fonctionne, essayez 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):

<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) 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);
        });
    });
}
Phil Rykoff
la source
(1) ne fonctionne pas. J'essaierai (2) quand je rentrerai à la maison; j'espère que JS peut remplacer cela; merci :)
casraf
1
(4) supprime définitivement le jaune: bordure de mise au point.
ruruskyi
Si le dernier bit ne fonctionne pas pour vous et que vous savez comment fonctionne javascript (vous avez le bon Id, etc.) Vous pourriez avoir le problème que j'ai eu, j'utilise jquery mobile pour certaines raisons et cela commence plus tard et remplace les entrées il semble. Donc ce que j'ai fait est de définir un intervalle qui le clone toutes les 50 ms (cela fonctionnait après 400 ms en utilisant setTimeout mais je ne veux pas risquer des connexions lentes). Et après une seconde, l'intervalle est supprimé:code
Mathijs Segers
var keepTheInputCloned = setInterval(function(){ 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); },50); setTimeout(function(){clearInterval(keepTheInputCloned)},1000);
Mathijs Segers
J'ai un problème similaire avec Safari sur Mavericks. Mais lorsque j'emploie la méthode 5, ils le font pendant une seconde (ou trois secondes lorsque je règle le délai d'expiration à 3000), puis le navigateur gagne et la saisie semi-automatique est activée. Dans mon cas d'utilisation, je demande à l'utilisateur son nom d'utilisateur / mot de passe pour un autre site afin que je puisse extraire des informations de l'autre site, donc je ne veux certainement pas qu'il remplisse automatiquement le nom d'utilisateur et le mot de passe qu'ils utilisent pour mon site. Des réflexions à ce sujet (en plus de la ruine du n ° 3 original)?
Jack RG
218

Trompez-le avec une ombre intérieure "forte":

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;
}
Tamás Pap
la source
10
C'est vraiment intelligent. :)
Jordan Grey
3
+1000 (si je pouvais) Ouais, je ne vois pas d'autre moyen de faire ça. C'est vraiment intrusif de webkit ...
o_O
1
génial, cela devrait être la réponse numéro un, simple et efficace
Pixelomo
3
C'est génial dans la mesure où cela fonctionne et est vraiment créatif. Mais cela me rappelle les vieux hacks IE6 et autres. C'est un peu merdique de la part de Google de nous donner un paramètre: -webkit-autofill et de ne pas laisser les concepteurs remplacer la valeur par défaut, non?
squarecandy
1
Fournir un choix de couleurs qui ne peut pas être personnalisé n'aide pas la convivialité ni l'accessibilité. Ces préoccupations sont toujours entièrement entre les mains des développeurs, à l'exception de ce piratage frustrant dans Chrome. Personne ne peut critiquer l'intention des développeurs Chrome, juste les résultats.
Lunster
25

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;
}
MCBL
la source
1
Cela a fonctionné pour moi - merci! (même si j'avais besoin de changer le blanc pour la couleur que je voulais réellement)
jennEDVT
2
Clairement la meilleure réponse.
Brandon Harris
16 
<form autocomplete="off">

Presque tous les navigateurs modernes respecteront cela.

Jason Kester
la source
7
Génial, mais cela ne résout que le problème le moins important; comment puis-je garder l'auto complet mais perdre le style ( prntscr.com/4hkh ) que le webkit lui enfonce dans la gorge? o: merci bien
casraf
1
En fait, il devrait faire les deux. La case ne devient jaune que pour vous informer que chrome / safari / ff l'a remplie automatiquement avec votre mot de passe. Si vous lui dites de ne pas le remplir, il n'aura pas la possibilité de le colorier.
Jason Kester
11
oui, mais regardez ce que j'ai dit: "comment puis-je garder l'auto-complétion mais perdre le style des
poussées webkit
Le seul problème avec autocompleteest qu'il est invalide en HTML avant la version 5.
Paul D. Waite
15

Après 2 heures de recherche, il semble que Google Chrome remplace toujours la couleur jaune, mais j'ai trouvé le correctif. Cela fonctionnera également pour le survol, la mise au point, etc. Tout ce que vous avez à faire est d'y 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

Don
la source
Cela fonctionne pour moi sans le 1000px, juste 0 partout, -webkit-box-shadow: 0 0 0 0 encart blanc! Important;
Luis Lopez
3

Vous pouvez également modifier l'attribut de nom de vos éléments de formulaire pour 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 requête est identique. Essayez 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 la saisie semi-automatique = "off" est toujours la meilleure solution :)

Dmitriy Likhten
la source
3

Vous pouvez désactiver la saisie semi-automatique à partir de HTML5 (via autocomplete="off"), mais vous NE POUVEZ PAS remplacer la mise en évidence du navigateur. Vous pouvez essayer de jouer avec ::selectionCSS (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'implémente spécifiquement une manière spécifique au fournisseur de le remplacer, vous ne pouvez rien faire pour les 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 l'application de vos feuilles de style et ignorent également les ! importantremplacements.

Alan Plum
la source
3

Parfois, la saisie semi-automatique sur le navigateur est toujours automatique lorsque vous n'avez que le code dans l' <form>élément.

J'ai également essayé de le mettre dans l' <input>élément et cela fonctionnait mieux.

<form autocomplete="off">  AND  <input autocomplete="off">

Cependant, la prise en charge de cet attribut cesse, 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 à l'intérieur des champs de saisie qui suggèrent qu'il s'agit d'un champ d'e-mail, de nom d'utilisateur ou de téléphone (par exemple, "Votre e-mail", "E-mail", etc. ")

entrez la description de l'image ici

Cela empêche les navigateurs de savoir de quel type de champ il s'agit et n'essaye donc pas de le remplir automatiquement.

andstud.io
la source
Ce que j'aime à ce sujet, c'est que la plupart des gens n'apprécieront pas que le formulaire entier ne soit pas rempli lors d'un rechargement de page (par exemple une longue zone de texte), mais permet au développeur d'empêcher le remplissage de certains éléments (par exemple le numéro de carte bancaire). Malheureusement, le support pour cet attribut cesse
Luke Madhanga
1

Si c'est dans le champ de saisie que vous essayez de "décolorer" ...

  1. Définissez une couleur d'arrière-plan avec css ... disons #ccc (gris clair).
  2. Add value = "someext", qui remplit temporairement le champ avec "someext"
  3. (facultatif) Ajoutez un peu de javascript pour rendre le «quelque chose» clair lorsque vous allez mettre le vrai texte.

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='';" />
Cheval Blanc
la source
1

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);
}
Arjan
la source
1
Je crois que ce sera le cas, mais ne serait-il pas un peu difficile de faire cela 50 fois par seconde? Je sais que cela fonctionnera et ne sera pas trop lent. Mais cela semble un peu trop.
Mathijs Segers
0

La capture d'écran à laquelle vous avez lié indique que WebKit utilise le sélecteur input:-webkit-autofillpour 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 fonctionnera probablement. Ces champs sont mis en surbrillance pour alerter l'utilisateur qu'ils ont été remplis automatiquement avec des informations privées (telles que l'adresse personnelle de l'utilisateur) et on pourrait soutenir que permettre à une page de se cacher entraîne un risque de sécurité.

benzado
la source
0

L' formélément a un autocompleteattribut que vous pouvez définir off. À partir du CSS, la !importantdirective après une propriété l'empêche d'être surchargée:

background-color: white !important;

Seul IE6 ne le comprend pas.

Si je vous ai mal compris, il y a aussi la outlinepropriété que vous pourriez trouver utile.

zneak
la source
2
Chrome semble ignorer le! Important quand il remplit automatiquement les champs de
saisie
@Torandi Cela peut être dû aux feuilles de style de l'agent utilisateur. Les paramètres des feuilles de style de l'agent utilisateur doivent s'appliquer en dernier, sauf s'il contient la !importantdirective, auquel cas il prévaut sur tout le reste. Vous devriez consulter la feuille de style de votre agent utilisateur (même si je ne sais pas où la trouver).
zneak
0

J'ai vu la fonctionnalité de saisie semi-automatique de la barre d'outils Google désactivée avec javascript. Cela peut fonctionner avec d'autres outils de saisie 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>
Adam
la source
0

Après avoir essayé beaucoup de choses, j'ai trouvé des solutions fonctionnelles qui ont détruit les champs remplis automatiquement et les ont remplacés par des doublons. Pour ne pas perdre les événements attachés, j'ai trouvé une autre solution (un peu longue).

A chaque événement «d'entrée», il attache rapidement des événements de «modification» à toutes les entrées impliquées. Il teste s'ils ont été remplis automatiquement. Si oui, envoyez un nouvel événement de 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 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);
  }
});
Ernests Karlsons
la source
0

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'attribut et masquer l'entrée d'origine. Le délai d'expiration est nécessaire pour l'iPad

Mite
la source
0

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

<!-- unused field to stop browsers from overriding form style -->
<input type='password' style = 'display:none' />
Kt Mack
la source
0

J'ai lu tellement de threads et essayé tellement de morceaux de code. Après avoir rassemblé tout cela, le seul moyen que j'ai trouvé pour vider proprement les champs de connexion et de mot de passe et réinitialiser leur arrière-plan en blanc était 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);
});

N'hésitez pas à commenter, je suis ouvert à toutes les améliorations si vous en trouvez.

TwystO
la source
0

La saisie semi-automatique 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 d'entrée en HTML de «mot de passe» en «texte».

<input class="input input-xxl input-watery" type="text" name="password"/>

La saisie semi-automatique démarre 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 doit remplir. Ainsi, il n'y aura pas de saisie semi-automatique sur les champs de formulaire.

Après cela, liez le focus de l'événement au champ de mot de passe, par exemple. 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 tout!

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

UPD en 2018. J'ai également trouvé une astuce amusante. Définissez l'attribut readonly sur le champ d'entrée et supprimez-le sur l'événement de focus. Empêchez d'abord le navigateur de remplir automatiquement les champs, le second permettra de saisir des données.

volodymyr3131
la source
La saisie semi - automatique fait partie de la norme, bien que son utilisation et sa mise en œuvre puissent varier. De plus, la modification des types d'entrée dans IE échoue de manière spectaculaire, c'est pourquoi jQuery le bloque, mais ce n'est généralement pas une bonne idée si vous prévoyez de prendre en charge IE developer.mozilla.org/en-US/docs/Web/Security/…
casraf
@casraf Désolé, cela fait partie de standart, mais cela ne fonctionne pas dans tous les navigateurs modernes comme il se doit, donc il ne fera pas ce pour quoi il a été inventé. Dans EDGE, cela fonctionne bien, à propos des versions précédentes
je
Certes, ce n'est pas mis en œuvre partout. Le problème persiste - en fonction de la distance à laquelle vous souhaitez prendre en charge IE - avant la version 11, je ne pense pas que vous puissiez changer le type d'entrée. Si vous ne vous inquiétez pas des anciennes versions, vous pouvez aussi bien utiliser autocomplete=off, car cela fonctionne dans FF, Chrome pendant un certain temps et IE à partir de la version précédente environ
casraf
J'ai essayé d'utiliser autocomplete = off, à la fois pour les entrées et le formulaire, et Chrome remplit toujours les données des formulaires d'inscription et de connexion (. Il s'agit simplement d'une sorte de magie étrange, car sur la base des commentaires, dans certains cas, cela fonctionne, et dans certains ce n'est pas le cas =)
volodymyr3131
Je sais que ces normes ne sont pas vraiment suivies de manière cohérente. C'est dommage, cela nous rend la vie plus difficile :(
casraf
0

Veuillez essayer avec autocomplete = "none" dans votre balise d'entrée

Cela fonctionne pour moi

Vayodya Tamari
la source
0

J'ai également dû changer la couleur du texte en quelque chose de plus sombre (voir Couleurs de thème sombres de StackOverflow).

Alors fini avec une solution hybride de @ Tamás Pap, @MCBL et @ don:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px #2d2d2d inset !important;
    -webkit-text-stroke-color: #e7e8eb !important;
    -webkit-text-fill-color: #e7e8eb !important;
}
Andrei
la source
-3

Pourquoi ne pas simplement mettre ceci dans votre css:

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

Cela devrait régler votre problème. Bien que cela soulève un problème d'utilisation, car maintenant l'utilisateur ne peut pas voir que le formulaire a été rempli automatiquement de la manière dont il est habitué.

[modifier] Après avoir posté ceci, j'ai vu qu'une réponse similaire avait déjà été donnée et que vous aviez commenté qu'elle ne fonctionnait pas. Je ne vois pas vraiment pourquoi car cela a fonctionné lorsque je l'ai testé.

Kris
la source
ne fonctionne pas à la fois dans Chrome et Safari. le style est input:-webkit-autofillet input --webkit-autocompleten'existe tout simplement pas
ruruskyi
@EliseuMonar: Je suis presque sûr de ne pas mentir, mais je ne me souviens pas des détails sur comment ou où je l'ai testé. Le code lui-même a probablement été tapé à partir de la mémoire, pas copié / collé, donc autocomplete vs autofill? Je ne sais pas.
Kris
-3

Le VRAI problème ici 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'attribut 'name'), alors quand l'utilisateur retourne à la page, le remplissage automatique se fera dans le champ de saisie du PREMIER [formulaire] sur la page, et non dans le [formulaire] qui a été envoyé. La deuxième fois, le [formulaire] NEXT sera rempli automatiquement, et ainsi de suite. Seul [formulaire] avec un champ de saisie avec le MÊME nom sera affecté.

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

Opera remplit automatiquement le bon [formulaire].

Firefox et IE ne se remplissent pas automatiquement.

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

Par Lindberg
la source