web-dev-qa-db-fra.com

Désactiver la saisie semi-automatique via CSS

Est-il possible d'utiliser CSS pour désactiver la complétion automatique sur un élément de formulaire (en particulier un champ de texte)?

J'utilise une bibliothèque de balises qui n'autorise pas l'élément autocomplete et j'aimerais désactiver cette fonction sans utiliser Javascript.

htmlcsshtml-form
77
David

Vous pouvez utiliser une id et une name générées à chaque fois, ce qui est différent, afin que le navigateur ne puisse pas se souvenir de ce champ de texte et ne suggérera pas certaines valeurs. 

C’est au moins l’alternative sûre entre navigateurs, mais je vous conseillerais d’obtenir la réponse de RobertsonM (autocomplete="off").

39
codevour

Dans l'état actuel des choses, il n'y a pas d'attribut «autocomplete off» dans CSS. Cependant, HTML a un code simple pour cela:

<input type="text" id="foo" value="bar" autocomplete="off" />

Si vous recherchez un effecteur couvrant l’ensemble du site, une solution simple consisterait simplement en une fonction js permettant de parcourir toutes les entrées et d’ajouter cette balise, ou de rechercher la classe/id CSS correspondante.

L'attribut autocomplete fonctionne correctement dans Chrome et Firefox (!), Mais voir aussi Le W3C dispose-t-il d'un moyen valide pour désactiver la complétion automatique dans un formulaire HTML?

113
RobertsonM

vous pouvez facilement implémenter par jQuery

$('input').attr('autocomplete','off');
46
ahhmarr

Si vous utilisez une form, vous pouvez désactiver tous les compléments automatiques avec,

<form id="Form1" runat="server" autocomplete="off">
14
Ernest

CSS n'a pas cette capacité. Vous devrez utiliser un script côté client.

12
Sampson

J'ai essayé tous les moyens suggérés à partir des réponses à cette question et d'autres articles sur le Web mais ne fonctionnant pas de toute façon. J'ai essayé autocomplete = "new-random-value", autocomplete = "off" dans l'élément de formulaire, en utilisant un script côté client comme ci-dessous mais en dehors de $ (document) .ready () comme l'un des utilisateurs mentionnés:

$(':input').on('focus', function () {
  $(this).attr('autocomplete', 'off')
});

J'ai trouvé peut-être une autre priorité dans le navigateur à cause de ce comportement étrange! Alors j'ai cherché plus et finalement, j'ai relu attentivement les lignes ci-dessous de ce bon article :

Pour cette raison, de nombreux navigateurs modernes ne prennent pas en charge autocomplete = "off" pour les champs de connexion:

Si un site définit autocomplete = "off" pour a et que le formulaire inclut nom d’utilisateur et mot de passe, le navigateur offrira toujours se souvenir de cette connexion, et si l’utilisateur accepte, le navigateur utilisera remplit automatiquement ces champs lors de la prochaine visite de l'utilisateur sur la page. Si un site définit autocomplete = "off" pour les champs nom d'utilisateur et mot de passe, alors le navigateur proposera toujours de se souvenir de cet identifiant, et si le l’utilisateur accepte, le navigateur remplira automatiquement ces champs la prochaine fois que le l'utilisateur visite la page. C'est le comportement dans Firefox (depuis la version 38), Google Chrome (depuis 34) et Internet Explorer (depuis la version 11).

Si vous définissez une page de gestion des utilisateurs où un utilisateur peut spécifier un fichier nouveau mot de passe pour une autre personne, et donc vous voulez empêcher remplissage automatique des champs de mot de passe, vous pouvez utiliser autocomplete = "new-password"; Cependant, la prise en charge de cette valeur n'a pas été implémentée sur Firefox.

C'est juste travaillé. J'ai essayé spécialement en chrome et j'espère que cela continue de fonctionner et d'aider les autres.

3
QMaster

Grâce à @ ahhmarr's solution, j'ai pu résoudre le même problème dans mon environnement Angular + ui-router, que je partagerai ici pour tous les intéressés.

Dans mon index.html, j'ai ajouté le script suivant:

<script type="text/javascript">
    setTimeout(function() {
        $('input').attr('autocomplete', 'off');
    }, 2000);
</script>

Ensuite, pour couvrir les changements d'état, j'ai ajouté les éléments suivants dans mon contrôleur racine:

$rootScope.$on('$stateChangeStart', function() {
                $timeout(function () {
                    $('input').attr('autocomplete', 'off');
                }, 2000);
            });

Les délais d'attente sont à rendre par le code HTML avant d'appliquer le jquery.

Si vous trouvez une meilleure solution, merci de me le faire savoir.

1
TrampGuy

J'ai résolu le problème en ajoutant un faux nom de saisie semi-automatique pour toutes les entrées.

$("input").attr("autocomplete", "fake-name-disable-autofill");
0
Webdma