Désactiver la saisie semi-automatique via CSS

Est-il possible d'utiliser CSS pour désactiver la saisie semi-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 de saisie semi-automatique et je souhaite désactiver la saisie semi-automatique sans utiliser Javascript.

Vous pouvez utiliser un généré idet à namechaque fois, qui est différent, de sorte que le navigateur ne peut pas se souvenir de ce champ de texte et ne pourra pas suggérer certaines valeurs.

C'est au moins l'alternative sûre pour tous les navigateurs, mais je recommanderais d'aller avec la réponse de RobertsonM ( autocomplete="off").

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 cherchez un effecteur à l'échelle du site, une solution simple serait d'avoir simplement une fonction js pour exécuter toutes les entrées et ajouter cette balise, ou chercher la classe / id css correspondante.

L'attribut de saisie semi-automatique fonctionne correctement dans Chrome et Firefox (!), Mais consultez également Existe-t-il un moyen valide du W3C pour désactiver la saisie semi-automatique dans un formulaire HTML?

vous pouvez facilement implémenter par jQuery

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

Si vous utilisez un, formvous pouvez désactiver toutes les saisies automatiques avec,

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

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

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

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

J'ai trouvé peut-être une autre priorité dans le navigateur à cause de ce comportement étrange! J'ai donc 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 comprend des champs de saisie de nom d'utilisateur et de mot de passe, le navigateur proposera toujours de se souvenir de cette connexion, et si l'utilisateur accepte, le navigateur remplira automatiquement ces champs la prochaine fois que l'utilisateur visite la page. Si un site définit autocomplete = "off" pour les champs de nom d'utilisateur et de mot de passe, le navigateur proposera toujours de se souvenir de cette connexion, et si l'utilisateur l'accepte, le navigateur remplira automatiquement ces champs la prochaine fois que l'utilisateur visitera la page. C'est le comportement de 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 dans laquelle un utilisateur peut spécifier un nouveau mot de passe pour une autre personne et que vous souhaitez par conséquent empêcher le 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.

Cela a juste fonctionné. J'ai spécialement essayé Chrome et j'espère que cela continuera de fonctionner et d'aider les autres.

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

Grâce à la solution de @ ahhmarr, j'ai pu résoudre le même problème dans mon routeur angulaire + ui environnement , que je partagerai ici pour quiconque est intéressé.

Dans mon index.htmlj'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é ce qui suit dans mon contrôleur racine:

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

Les délais d'attente sont pour le html à rendre avant d'appliquer la jquery.

Si vous trouvez une meilleure solution, faites-le moi savoir.

Vous ne pouvez pas utiliser CSS pour désactiver la saisie semi-automatique, mais vous pouvez utiliser HTML:

<input type="text" autocomplete="false" />

Techniquement, vous pouvez remplacer falsepar une valeur non valide et cela fonctionnera. Cet iOS est la seule solution que j'ai trouvée qui fonctionne également dans Edge.

Il y a 3 façons d'y arriver, je les mentionne par ordre d'être la meilleure façon ...

Manière 1-HTML:

<input type="text" autocomplete="false" />

2-Javascript manière:

document.getElementById("input-id").getAttribute("autocomplete") = "off";

Manière 3-jQuery:

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

J'utilise juste à la 'new-password'place 'off'sur la saisie semi-automatique.

et j'ai aussi essayé d'utiliser ce code et fonctionne (du moins de mon côté), j'utilise WP et GravityForm pour votre information

$('input').attr('autocomplete','new-password');

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