Maison > interface Web > js tutoriel > Comment afficher et masquer le mot de passe de la page de connexion dans JS

Comment afficher et masquer le mot de passe de la page de connexion dans JS

亚连
Libérer: 2018-06-22 14:38:24
original
3708 Les gens l'ont consulté

Sur la page de connexion, il est souvent utilisé pour masquer et afficher le mot de passe en cliquant sur la petite image en forme d'œil dans la zone de texte. Laissez-moi vous présenter comment afficher et masquer le mot de passe sur la page de connexion basée sur JS. Les amis qui en ont besoin peuvent s'y référer

Sur la page de connexion, il est souvent utilisé pour masquer et afficher le mot de passe par. en cliquant sur la petite image en forme d'œil dans la zone de texte. Fonction, en fait, le principe de mise en œuvre est très simple. Le type d'entrée est modifié via des événements de clic. Le processus spécifique peut être vu dans le code :

. Avant de partager le code d'implémentation avec vous, laissez-moi vous montrer le rendu :

Comment afficher et masquer le mot de passe de la page de connexion dans JS

Comment afficher et masquer le mot de passe de la page de connexion dans JS

<ul class="form-area">
 <li>
  <p class="item-content">
   <p class="item-input">
    <input type="text" name="accountName" autofocus required="required" placeholder="请输入用户名">
   </p>
  </p>
 </li>
 <li>
  <p class="item-content">
   <p class="item-input">
     <input type="password" name="password" id="password" required="required" placeholder="请输入密码">
   </p>
  </p>
 </li>
 <li>
  <span style="position:absolute;right: 20px;top: -38px">
   <img  id="showText" onclick="hideShowPsw()" alt="Comment afficher et masquer le mot de passe de la page de connexion dans JS" >
  </span>
 </li>
</ul>
Copier après la connexion
<script type="text/javascript">
//获取input框内的切换图片id和input文本框的id
 var demoImg = document.getElementById("showText");
 var demoInput = document.getElementById("password");
 function hideShowPsw() {
  if (demoInput.type == "password") {
   demoInput.type = "text";
   demoImg.src ="../Images/showPasswd.png";
  } else {
   demoInput.type = "password";
   demoImg.src = "../Images/hidePasswd.png";
  }
 }
</script>
Copier après la connexion

Ce qui précède est ce que J'ai compilé pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

À quoi devez-vous faire attention lors de l'optimisation des projets Vue ?

Développé en utilisant une approche modulaire dans vuejs

Comment implémenter la fonction de mise à jour de tableau dans VUE

Comment utiliser vue-cli pour implémenter des applications multipages

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal