How to display and hide the login page password in JS

On the login page, the function of hiding and displaying the password is often used by clicking on the small eye-like picture in the text box. Let me introduce to you how to display and hide the password on the login page based on JS. Friends who need it can refer to it

On the login page, it is often used to hide and display the password by clicking on a small eye-like picture in the text box. Function, in fact, the implementation principle is very simple. The input type is changed through the click event. The specific process is shown in the code:

Before I share the implementation code with you, let me show you the rendering:

<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="How to display and hide the login page password in 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>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

What should you pay attention to when optimizing Vue projects?

Developed in a modular way in vuejs

How to implement the array update function in VUE

How to use vue-cli to implement multi-page applications

The above is the detailed content of How to display and hide the login page password in JS. For more information, please follow other related articles on the PHP Chinese website!