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

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 :

<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>

<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>

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!