源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2021-07-08 02:04 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:JS实现登录页密码的显示和隐藏功能
在登录页经常会用到通过点击文本框的类似小眼睛图片来实现隐藏显示密码的功能,其实实现原理很简单,通过点击事件来改变input的type类型,具体过程看代码: 在没给大家分享实现代码之前,先给大家展示下效果图: [img]http://files.jb51.net/file_images/article/201712/2017120614302032.png[/img] [img]http://files.jb51.net/file_images/article/201712/2017120614302033.png[/img]
<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>
[b]总结[/b] 以上所述是小编给大家介绍的JS实现登录页密码的显示和隐藏,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对编程素材网网站的支持!
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部