JS实现表单中点击小眼睛显示隐藏密码框中的密码


Posted in Javascript onApril 13, 2020

领导交个一个任务,要求在表单中点击小眼睛显示隐藏密码框中的密码!在一些网站中经常会用到这样的功能,今天小编就给大家分享我的实现思路及代码

准备:

1.两张png图片,一张睁眼,一张闭眼,可以到阿里巴巴矢量图库寻找(免费下载)

JS实现表单中点击小眼睛显示隐藏密码框中的密码
JS实现表单中点击小眼睛显示隐藏密码框中的密码

最终效果图

JS实现表单中点击小眼睛显示隐藏密码框中的密码
JS实现表单中点击小眼睛显示隐藏密码框中的密码

css样式部分,样式可根据自己喜好设置,没有过硬要求

<style>
    div:first-child {
      width: 300px;
      height: 50px;
      background-color: red;
      color: white;
      margin: 20px auto;
      text-align: center;
      line-height: 50px;
    }

    div:nth-child(2) {
      position: relative;
      width: 300px;
      height: 50px;
      margin: 100px auto;
    }
    input {
      width: 300px;
      height: 46px;
      border: 0px white;
      border-bottom: 1px solid black;
      outline: none;
    }
    #eyes {
      width: 18px;
      position: absolute;
      top: 27px;
      right: 2px;
    }
  </style>

 

主体部分

<div>
    密码
  </div>
  <div>
    <input type="password">
    <!--默认闭眼图-->
    <label><img src="1.png" alt="" id="eyes"></label>
  </div>

 

js部分

<script>
      //获取元素(两种方式都可以)
    var input = document.querySelector('input')
    var imgs = document.getElementById('eyes');
    //下面是一个判断每次点击的效果
    var flag = 0;
    imgs.onclick = function () {
      if (flag == 0) {
        input.type = 'text';
        eyes.src = '2.png';//睁眼图
        flag = 1;
      } else {
        input.type = 'password';
        eyes.src = '1.png';//闭眼图
        flag = 0;
      }
    }
  </script>

总结

到此这篇关于JS实现表单中点击小眼睛显示隐藏密码框中的密码的文章就介绍到这了,更多相关js 密码框点击小眼睛显示隐藏密码内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Cookie 小记
Apr 01 Javascript
firefox下input type=&quot;file&quot;的size是多大
Oct 24 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
Jan 09 Javascript
jquery怎样实现ajax联动框(二)
Mar 08 Javascript
借助javascript代码判断网页是静态还是伪静态
May 05 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
Mar 09 Javascript
jquery插件orbit.js实现图片折叠轮换特效
Apr 14 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
Oct 12 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
Mar 14 Javascript
vue中Axios的封装与API接口的管理详解
Aug 09 Javascript
node.js实现为PDF添加水印的示例代码
Dec 05 Javascript
vue cli3适配所有端方案的实现
Apr 13 #Javascript
RxJS在TypeScript中的简单使用详解
Apr 13 #Javascript
JS错误处理与调试操作实例分析
Apr 13 #Javascript
JS正则表达式常见函数与用法小结
Apr 13 #Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
Apr 13 #Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
Apr 13 #Javascript
JavaScript创建表格的方法
Apr 13 #Javascript
You might like
如何将数据从文本导入到mysql
2006/10/09 PHP
php 过滤器实现代码
2010/08/09 PHP
php+mysql+jquery实现简易的检索自动补全提示功能
2017/04/15 PHP
新浪的图片新闻效果
2007/01/13 Javascript
Javascript 检测、添加、移除样式(className)函数代码
2009/09/08 Javascript
javascript &amp;&amp;和||运算法的另类使用技巧
2009/11/28 Javascript
javascript cookie操作类的实现代码小结附使用方法
2010/06/02 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
利用jq让你的div居中的好方法分享
2013/11/21 Javascript
javascript通过className来获取元素的简单示例代码
2014/01/10 Javascript
浅谈Javascript 数组与字典
2015/01/29 Javascript
在JavaScript应用中实现延迟加载的方法
2015/06/25 Javascript
详解JavaScript节流函数中的Throttle
2016/07/16 Javascript
vue router2.0二级路由的简单使用
2017/07/05 Javascript
基于Vue+element-ui 的Table二次封装的实现
2018/07/20 Javascript
基于JavaScript canvas绘制贝塞尔曲线
2018/12/25 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
2019/11/26 jQuery
VSCode launch.json配置详细教程
2020/06/18 Javascript
解析Python中的异常处理
2015/04/28 Python
requests和lxml实现爬虫的方法
2017/06/11 Python
apache部署python程序出现503错误的解决方法
2017/07/24 Python
Python标准库之itertools库的使用方法
2017/09/07 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
Django实现将一个字典传到前端显示出来
2020/04/03 Python
python代码能做成软件吗
2020/07/24 Python
Python 无限级分类树状结构生成算法的实现
2021/01/21 Python
微软英国官方网站:Microsoft英国
2016/10/15 全球购物
澳大利亚首个在线预订旅游网站:Wotif
2017/07/19 全球购物
Orlebar Brown官网:设计师泳裤和泳装
2020/12/08 全球购物
关于青春的演讲稿
2014/05/05 职场文书
期末考试复习计划
2015/01/19 职场文书
六一儿童节主持开场白
2015/05/28 职场文书
话题作文之呼唤
2019/12/18 职场文书
Python实现信息轰炸工具(再也不怕说不过别人了)
2021/06/11 Python
JS数组方法some、every和find的使用详情
2021/10/05 Javascript
CSS中实现动画效果-附案例
2022/02/28 HTML / CSS