Comment implémenter le changement de visibilité du mot de passe (afficher et masquer) en JavaScript

Le contenu de cet article explique comment implémenter le changement de visibilité des mots de passe (affichage et masquage) en JavaScript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Tout le monde a probablement vu l'effet de changement de visibilité (affichage et masquage) du mot de passe frontal, je n'en dirai donc pas beaucoup plus.

Par défaut, la balise d'entrée du mot de passe saisi est type="password", et le mot de passe par défaut est représenté par un point ou un astérisque. Pour rendre le mot de passe visible, nous devons changer le type en "texte". Cet effet peut être facilement obtenu en modifiant l'attribut type de la balise d'entrée dans les navigateurs tels que Chrome et FireFox, mais une erreur sera signalée sous IE. Si vous avez besoin d'une compatibilité avec IE, vous devez envisager d'autres options.

Il y a quelques points à noter ici :

L'exemple utilise le remplacement de l'intégralité du schéma de balises d'entrée, il est donc compatible avec IE

Le diagramme oculaire utilise iconfont , donc utiliser CSS Switching est relativement simple.

Dans le navigateur IE10+, lorsque vous rencontrez la zone de saisie du mot de passe, une petite icône en forme d'œil s'affichera dans la zone. Après avoir cliqué, le mot de passe sera également affiché. S'il s'agit d'une zone de saisie de texte ordinaire, IE10 s'affichera automatiquement. Une petite croix s'affiche. En cliquant dessus, vous pouvez effacer le contenu saisi dans la zone de texte. Si vous ne souhaitez pas que les deux fonctions fournies avec IE10 prennent effet, vous pouvez l'ajouter au CSS :

CSS. code :

input::-ms-clear {display:none;}
input::-ms-reveal {display:none;}

Ces deux définitions CSS pour le navigateur IE peuvent supprimer les fonctions d'effacement automatique du texte et d'affichage du mot de passe du navigateur IE.

Ce qui précède est une introduction complète à la façon dont JavaScript implémente le changement de visibilité des mots de passe (affichage et masquage) Si vous souhaitez en savoir plus sur le Tutoriel JavaScript, veuillez faire attention au site Web PHP chinois.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!