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


Posted in Javascript onDecember 06, 2017

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

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

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

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

<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实现登录页密码的显示和隐藏,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript中的Window窗口对象
Jan 16 Javascript
javascript新手语法小结
Jun 15 Javascript
js 方法实现返回多个数据的代码
Apr 30 Javascript
基于jquery的仿百度的鼠标移入图片抖动效果
Sep 17 Javascript
javascript日期对象格式化为字符串的实现方法
Jan 14 Javascript
JS实现div居中示例
Apr 17 Javascript
15款jQuery分布引导插件分享
Feb 04 Javascript
Bootstrap教程JS插件弹出框学习笔记分享
May 17 Javascript
javascript中对Date类型的常用操作小结
May 19 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
Oct 28 Javascript
移动web开发之touch事件实例详解
Jan 17 Javascript
前端Vue项目详解--初始化及导航栏
Jun 24 Javascript
微信小程序 scroll-view实现锚点滑动的示例
Dec 06 #Javascript
基于Vue制作组织架构树组件
Dec 06 #Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
Dec 06 #Javascript
如何重置vue打印变量的显示方式
Dec 06 #Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
Dec 06 #Javascript
vue cli使用绝对路径引用图片问题的解决
Dec 06 #Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
Dec 06 #Javascript
You might like
PHP获取数组中某元素的位置及array_keys函数应用
2013/01/29 PHP
浅谈web上存漏洞及原理分析、防范方法(文件名检测漏洞)
2013/06/29 PHP
ThinkPHP多语言支持与多模板支持概述
2014/08/22 PHP
PHP版本升级到7.x后wordpress的一些修改及wordpress技巧
2015/12/25 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
Save a File Using a File Save Dialog Box
2007/06/18 Javascript
javascript Discuz代码中的msn聊天小功能
2008/05/25 Javascript
JS 密码强度验证(兼容IE,火狐,谷歌)
2010/03/15 Javascript
25个好玩的JavaScript小游戏分享
2011/04/22 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
2012/12/25 Javascript
JS 两个字符串时间的天数差计算
2013/08/25 Javascript
js如何获取object类型里的键值
2014/02/18 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
2015/09/09 Javascript
jQuery validate插件实现ajax验证重复的2种方法
2016/01/22 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
2016/05/03 Javascript
JQuery.validate在ie8下不支持的快速解决方法
2016/05/18 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
2017/01/13 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
2017/04/27 Javascript
浅谈Angular 中何时取消订阅
2017/11/22 Javascript
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
在 Typescript 中使用可被复用的 Vue Mixin功能
2018/04/17 Javascript
微信公众平台获取access_token的方法步骤
2019/03/29 Javascript
jquery添加div实现消息聊天框
2020/02/08 jQuery
原生JavaScript实现贪吃蛇游戏
2020/11/04 Javascript
用Python编写web API的教程
2015/04/30 Python
python实现将元祖转换成数组的方法
2015/05/04 Python
Python的Django应用程序解决AJAX跨域访问问题的方法
2016/05/31 Python
Python基于socket模块实现UDP通信功能示例
2018/04/10 Python
Python hmac模块使用实例解析
2019/12/24 Python
基于Python计算圆周率pi代码实例
2020/03/25 Python
matplotlib 生成的图像中无法显示中文字符的解决方法
2020/06/10 Python
美国学校用品、教室和教学商店:Discount School Supply
2018/04/04 全球购物
来自圣地亚哥的实惠太阳镜:Knockaround
2018/08/27 全球购物
公司法定代表人授权委托书
2014/09/29 职场文书
用python修改excel表某一列内容的操作方法
2021/06/11 Python
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL