在JS中如何实现登录页密码的显示和隐藏

在登录页经常会用到通过点击文本框的类似小眼睛图片来实现隐藏显示密码的功能。下面给大家介绍基于JS实现登录页密码的显示和隐藏功能，需要的朋友参考下吧

在登录页经常会用到通过点击文本框的类似小眼睛图片来实现隐藏显示密码的功能，其实实现原理很简单，通过点击事件来改变input的type类型，具体过程看代码：

在没给大家分享实现代码之前，先给大家展示下效果图：

<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()">
  </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>

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

Vue项目优化需要注意哪些？

在vuejs中使用模块化的方式开发

在VUE中如何实现数组更新功能

如何使用vue-cli实现多页应用

以上就是在JS中如何实现登录页密码的显示和隐藏的详细内容，更多请关注其它相关文章！