Outrepasser le formulaire du navigateur - remplir et mettre en évidence la saisie avec HTML/CSS

j'ai 2 formulaires de base -- inscrivez-vous et inscrivez-vous, tous les deux sur la même page. Maintenant, je n'ai aucun problème avec le signe en forme d'auto-remplissage, mais le formulaire d'inscription automatique remplit ainsi, et je ne l'aime pas.

en outre, les styles de forme obtiennent un fond jaune que je ne peux pas gérer pour outrepasser et je ne veux pas utiliser inline CSS pour le faire. Que puis-je faire pour qu'ils cessent d'être colorés en jaune et (éventuellement) auto-remplissage ? Grâce à l'avance!

112
demandé sur casraf 2010-02-26 01:19:00

20 réponses

pour l'autocompletion, vous pouvez utiliser: 

<form autocomplete="off">

concernant 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-les styles sont encore plus importants que .classe les styles, les peut "1519180920 de travail": 

#inputId:-webkit-autofill {
    background-color: white !important;
}

2) si cela ne fonctionne pas, vous pouvez essayer de définir le style via javascript par programme 

$("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 cache 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é 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: 

<body onload="loadPage();">

bonne chance: -)

5) si aucun des travaux ci-dessus essayer d'enlever les éléments d'entrée, les cloner, puis placer les éléments clonés de nouveau sur la page (travaux 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) 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);
        });
    });
}
128
répondu Phil Rykoff 2015-06-12 17:12:40

le Tromper 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;
}
158
répondu Tamás Pap 2012-12-13 12:35:37

ajouter cette règle CSS, et la couleur jaune de fond disparaîtra. :) 

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}
22
répondu MCBL 2013-10-17 11:56:45 
<form autocomplete="off">

à peu près tous les navigateurs modernes respecter.

15
répondu Jason Kester 2010-02-25 22:21:04

après 2 heures de recherche, il semble que Google Chrome l'emporte toujours sur la couleur jaune, mais j'ai trouvé la solution. Il fonctionnera pour le vol stationnaire, la mise au point, etc. ainsi. 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 d'entrée

12
répondu don 2016-12-26 16:12:24

vous pouvez également modifier l'attribut de nom de vos éléments de formulaire pour être quelque chose généré de sorte que le navigateur ne tiendra pas compte de celui-ci. Cependant firefox 2.x+ et google chrome ne semble pas avoir beaucoup de problèmes avec cela si l'url de la requête est identique. Essayez essentiellement d'ajouter un param de demande de sel et un nom de champ de sel pour le formulaire d'inscription.

Cependant, je pense que autocomplete="off" est toujours en tête de la solution :)

3
répondu Dmitriy Likhten 2010-02-25 22:26:06

parfois autocomplete sur le navigateur encore autocompletes quand vous avez juste le code dans l'élément <form> .

j'ai essayé de le mettre dans l'élément <input> aussi et il a fonctionné mieux. 

<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

" un autre travail que j'ai trouvé est de sortir les espaces réservés à l'intérieur des champs d'entrée qui suggèrent qu'il s'agit d'un courriel, d'un nom d'utilisateur, ou d'un champ de téléphone (c.-à-d. "Votre Email"," Email", etc.")

enter image description here

cela le rend si que les navigateurs ne savent pas quel type de champ il est, donc n'essaie pas de autocomplete it.

3
répondu andstud.io 2014-08-15 15:22:17

vous pouvez désactiver l'auto-completion à partir de HTML5 (via autocomplete="off" ), mais vous ne pouvez pas outrepasser la mise en évidence du navigateur. Vous pouvez essayer de jouer avec ::selection dans 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 vendeur de navigateur spécifiquement mis en œuvre une façon spécifique vendeur de l'Annuler, vous ne pouvez rien faire au sujet de ces styles qui sont déjà destinés à outrepasser la feuille de style du site pour utilisateur. Ceux-ci sont généralement appliqués après vos feuilles de style sont appliqués et ignorer ! important remplace, aussi.

2
répondu Alan Plum 2010-03-06 23:58:27

cette correction du 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);
}
2
répondu Arjan 2013-01-18 00:28:01

si c'est dans le champ d'entrée vous essayez de" dé-jaune"...

  1. Définir une couleur d'arrière-plan avec les css... disons #ccc (gris clair).
  2. Ajouter de la valeur="sometext", temporaire qui remplit le champ avec "sometext"
  3. (optionnel) Ajouter un peu de javascript pour rendre le" sometext " clair lorsque vous allez mettre le texte réel dans.

donc, 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='';" />
1
répondu whitehorse 2011-01-28 04:47:32

la capture d'écran à laquelle vous avez fait référence indique que WebKit utilise le sélecteur input:-webkit-autofill pour ces éléments. Vous avez essayé de mettre ça dans votre CSS? 

input:-webkit-autofill {
    background-color: white !important;
}

si ça ne marche pas, alors rien ne marchera probablement. Ces champs sont mis en surbrillance pour alerter l'utilisateur qu'ils ont été remplis automatiquement avec des informations privées (comme l'adresse de l'utilisateur) et il pourrait être soutenu que permettre à une page de se cacher qui permet un risque de sécurité.

0
répondu benzado 2010-03-07 00:02:02

l'élément form possède un attribut autocomplete que vous pouvez définir à off . Depuis la CSS, la directive !important après qu'une propriété l'empêche d'être supplantée: 

background-color: white !important;

seul IE 6 ne le comprend pas.

si je vous ai mal compris, il y a aussi la propriété outline que vous pourriez trouver utile.

0
répondu zneak 2010-03-07 00:02:19

J'ai vu la fonctionnalité autocomplete de Google toolbar désactivée avec javascript. Il pourrait fonctionner avec d'autres outils autofill; Je ne sais pas si cela aidera avec les navigateurs construits dans autocomplete. 

<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>
0
répondu Adam 2010-03-11 00:24:59

après avoir essayé beaucoup de choses, j'ai trouvé des solutions de travail qui ont atomisé les champs auto-remplis et les ont remplacés par des doubles. Pour ne pas perdre des événements attachés, j'ai trouvé une autre solution (un peu longue).

à chaque événement "input", il attache rapidement les événements" change " à toutes les entrées concernées. Il teste s'ils ont été auto-remplis. Si oui, puis envoyer un nouvel événement texte qui fera croire au navigateur que la valeur a été changée par l'utilisateur, donc permettant 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);
  }
});
0
répondu Ernests Karlsons 2012-12-03 20:43:09

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 );

clonez l'entrée, réinitialisez l'attribut et masquez l'entrée originale. Timeout est nécessaire pour iPad

0
répondu Mite 2014-04-25 09:24:18

puisque le navigateur recherche des 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' />
0
répondu Kt Mack 2014-10-13 03:25:35

j'ai lu tellement de fils et essayé tant de morceaux de code. Après avoir rassemblé toutes ces choses, la seule façon que j'ai trouvé de vider proprement les champs login et mot de passe et de réinitialiser leur arrière-plan à 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.

0
répondu TwystO 2016-08-08 14:39:43

Autocomplete off n'est pas supporté par les navigateurs modernes. La façon la plus facile de résoudre autocomplete 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 "password" à "text". 

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

Autocomplete commence après le chargement de la fenêtre. C'est OK. Mais lorsque le type de votre champ n'est pas 'password', le navigateur ne savait pas quels champs il devait remplir. Donc, il n'y aura pas d'autocomplete sur les champs de forme.

Après cela, lier un événement focusin de champ mot de passe, pour ex. dans la colonne vertébrale: 

'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');
}

C'est ça!

UPD: cette chose ne fonctionne pas avec les personnes handicapées JavaSciprt

UPD in 2018. Aussi trouvé quelques drôle de truc. Ensemble attribut lecture seule à l'entrée domaine, et le retirer sur les événements de focus. Premièrement, empêcher le navigateur de remplir automatiquement les champs, deuxièmement permettra d'entrer des données.

0
répondu volodymyr3131 2018-04-02 08:45:35

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 [type d'entrée="text" name="foo" ...] (c'est-à-dire avec la même valeur pour l'attribut "name"), alors lorsque l'utilisateur retourne à la page, le remplissage automatique sera fait dans le champ d'entrée du premier [formulaire] sur la page, et non dans le [formulaire] qui a été envoyé. La deuxième fois, le [formulaire] suivant sera rempli automatiquement, et ainsi de suite. Seulement [formulaire] avec un champ de texte d'entrée avec le même le nom sera affectée.

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

Opéra autofills le droit [formulaire].

Firefox et IE ne s'auto-remplissent pas.

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

-2
répondu Per Lindberg 2012-02-01 10:58:57

pourquoi ne pas simplement mettre cela dans votre css: 

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

qui devrait s'occuper de votre problème. Bien que cela soulève un problème d'utilisabilité parce que maintenant l'utilisateur ne peut pas voir que le formulaire a été rempli automatiquement de la façon dont il est habitué.

[edit] après avoir posté ceci j'ai vu qu'une réponse similaire avait déjà été donnée et que vous avez commenté dessus que cela n'a pas fonctionné. Je ne vois pas pourquoi parce que ça a marché quand je l'ai testé.

-3
répondu Kris 2010-03-11 16:18:14