当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JS实现登录页密码的显示和隐藏功能

JS实现登录页密码的显示和隐藏功能

2018年04月22日  | 移动技术网IT编程  | 我要评论

下载电驴,北欧旅游,湖南有哪些二本大学

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

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

这里写图片描述

这里写图片描述

<ul class="form-area">
 <li>
  <div class="item-content">
   <div class="item-input">
    <input type="text" name="accountname" autofocus required="required" placeholder="请输入用户名">
   </div>
  </div>
 </li>
 <li>
  <div class="item-content">
   <div class="item-input">
     <input type="password" name="password" id="password" required="required" placeholder="请输入密码">
   </div>
  </div>
 </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>

总结

以上所述是小编给大家介绍的js实现登录页密码的显示和隐藏，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网