Après avoir soumis le formulaire dans le navigateur, le navigateur demandera généralement « Avez-vous besoin de mémoriser le mot de passe ? » Après confirmation, certaines zones de saisie seront automatiquement remplies lors de la prochaine soumission du formulaire.
Cependant, dans certains scénarios (comme sur les pages de retrait et de recharge), la saisie automatique des mots de passe est très dangereuse. Certains moyens sont nécessaires pour empêcher le remplissage automatique du navigateur.
J'ai rencontré quelques pièges lors du processus de résolution. Voici quelques notes :
Étant donné que la fonctionnalité de remplissage automatique est implémentée par le navigateur lui-même, l'attribut de saisie semi-automatique n'a pas été écrit dans la spécification du W3C. De nombreux navigateurs ignoreront simplement cet attribut. La saisie automatique ne peut pas être désactivée.
Il est naturel de penser à un moyen d'utiliser js pour définir la valeur d'entrée vide lorsque la page est chargée, mais le remplissage automatique du navigateur est en fait rempli après l'exécution de js. . . Après avoir utilisé js pour définir la valeur de l'entrée comme étant vide, le navigateur a automatiquement rempli l'entrée, ce qui n'a pas pu résoudre le problème.
Une méthode largement diffusée sur Internet. Cette méthode est réalisable sur la plupart des versions de navigateurs, mais elle ne fonctionne pas sur certaines versions supérieures des navigateurs et Safari. Plusieurs méthodes présentées ultérieurement sont basées sur des améliorations de cette méthode.
<!-- Entrée supplémentaire --> <input type="password" style="display:none"/> <!-- Entrée originale --> <input type="mot de passe"/>
Cette méthode résout le problème du remplissage automatique dans Safari par rapport à celui ci-dessus. Mais cela ne fonctionne pas dans certaines versions supérieures de Chrome. (Après les tests, Chrome 46.0 fonctionne, Chrome 47.0 échoue)
<!-- Formulaire et saisie supplémentaires --> <form style="display:none"> <input type="mot de passe"/> </form> <!-- Entrée originale --> <input type="mot de passe"/>
Cette solution combine les deux méthodes ci-dessus, et résout enfin le problème du remplissage automatique sous Chrome 47.0.
<!--Contenu supplémentaire--> <form style="display:none"> <input type="mot de passe"/> </form> <input type="password" style="width:0;height:0;float:left;visibility:hidden"/> <!-- Entrée originale --> <input type="mot de passe"/>
Ce qu'il faut noter dans cette méthode, c'est que l'entrée qui est de la même génération que l'entrée cible ne peut pas être définie sur display : none. Si elle est définie, elle sera automatiquement renseignée dans Chrome 47.0, vous ne pouvez donc utiliser que d'autres moyens. pour masquer cette entrée.
Après avoir utilisé la dernière solution, celle-ci fonctionne bien dans différents navigateurs, et aucun remplissage automatique n'est trouvé pour l'instant. Effectivement, les problèmes de compatibilité frontale ont toujours été une chose dégoûtante. .
Ceci conclut cet article sur la façon dont HTML résout le problème de la mémorisation des zones de saisie de mot de passe dans les navigateurs. Pour plus d'informations sur la mémorisation des zones de saisie de mot de passe dans HTML, veuillez rechercher les articles précédents sur downcodes.com ou continuer à parcourir les articles connexes ci-dessous. downcodes.com plus à l'avenir !