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 相关文章推荐
jquery中的过滤操作详细解析
Dec 02 Javascript
jQuery 隐藏和显示 input 默认值示例
Jun 03 Javascript
jquery实现两个图片渐变切换效果的方法
Jun 25 Javascript
javascript中字体浮动效果的简单实例演示
Nov 18 Javascript
jQuery如何使用自动触发事件trigger
Nov 29 Javascript
javascript 用函数实现继承详解
May 28 Javascript
JavaScript中对象的不同创建方法
Aug 12 Javascript
JS实现颜色动态淡化效果
Mar 06 Javascript
JavaScript实现跟随滚动缓冲运动广告框
Jul 15 Javascript
教你用Cordova打包Vue项目的方法
Oct 17 Javascript
Javasript设计模式之链式调用详解
Apr 26 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
Sep 28 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无限级分类方法及代码
2013/06/21 PHP
THINKPHP在添加数据的时候获取主键id的值方法
2017/04/03 PHP
PhpStorm配置Xdebug调试的方法步骤
2019/02/02 PHP
Jquery ui css framework
2010/06/28 Javascript
js面向对象编程之如何实现方法重载
2014/07/02 Javascript
jquery实现页面虚拟键盘特效
2015/08/08 Javascript
用NODE.JS中的流编写工具是要注意的事项
2016/03/01 Javascript
很棒的js Tab选项卡切换效果
2016/08/30 Javascript
javascript实现复选框全选或反选
2017/02/04 Javascript
JS去除字符串中空格的方法
2017/02/14 Javascript
解决IE7中使用jQuery动态操作name问题
2017/08/28 jQuery
浅谈redux以及react-redux简单实现
2018/08/28 Javascript
angular4应用中输入的最小值和最大值的方法
2019/05/17 Javascript
Vue中使用better-scroll实现轮播图组件
2020/03/07 Javascript
Python中几种操作字符串的方法的介绍
2015/04/09 Python
Python脚本实现自动发带图的微博
2016/04/27 Python
Python处理PDF及生成多层PDF实例代码
2017/04/24 Python
Mac中升级Python2.7到Python3.5步骤详解
2017/04/27 Python
Python日志模块logging基本用法分析
2018/08/23 Python
python实现BP神经网络回归预测模型
2019/08/09 Python
PyTorch: Softmax多分类实战操作
2020/07/07 Python
加拿大最大的相机店:Henry’s
2017/05/17 全球购物
澳大利亚实惠时尚女装商店:Katies
2019/06/16 全球购物
惠而浦美国官网:Whirlpool.com
2021/01/19 全球购物
团员学习总结的自我评价范文
2013/10/14 职场文书
会议接待欢迎词
2014/01/12 职场文书
校运会广播稿100字
2014/01/27 职场文书
法人任命书范本
2014/06/04 职场文书
七一讲话心得体会
2014/09/05 职场文书
2014年大学生村官工作总结
2014/11/19 职场文书
文体活动总结
2015/02/04 职场文书
心灵捕手观后感
2015/06/02 职场文书
张丽莉事迹观后感
2015/06/16 职场文书
MySQL infobright的安装步骤
2021/04/07 MySQL
Java数组与堆栈相关知识总结
2021/06/29 Java/Android
Javascript设计模式之原型模式详细
2021/10/05 Javascript