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 相关文章推荐
jQuery插件slicebox实现3D动画图片轮播切换特效
Apr 12 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
May 30 Javascript
javascript创建含数字字母的随机字符串方法总结
Aug 01 Javascript
js面向对象编程总结
Feb 16 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
Nov 10 Javascript
Bootstrap实现翻页效果
Nov 27 Javascript
JS中offset和匀速动画详解
Feb 06 Javascript
详解redux异步操作实践
Aug 15 Javascript
Layer弹出层动态获取数据的方法
Aug 20 Javascript
vue 自定义指令自动获取文本框焦点的方法
Aug 25 Javascript
PM2自动部署代码步骤流程总结
Dec 10 Javascript
如何在微信小程序中使用骨架屏的步骤
Jun 12 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
php入门学习知识点六 PHP文件的读写操作代码
2011/07/14 PHP
PHP如何实现跨域
2016/05/30 PHP
Laravel5.0+框架邮件发送功能实现方法图文与实例详解
2019/04/23 PHP
js判断浏览器的比较全的代码
2007/02/13 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
2011/11/15 Javascript
javascript 数组操作详解
2015/01/29 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
2018/04/27 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
2018/06/20 Javascript
如何手写简易的 Vue Router
2020/10/10 Javascript
JavaScript构造函数原理及实现流程解析
2020/11/19 Javascript
[01:37]TI4西雅图DOTA2前线报道 VG拿下首胜教练357给出获胜秘诀
2014/07/10 DOTA
[28:57]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/16 DOTA
python递归打印某个目录的内容(实例讲解)
2017/08/30 Python
Python基于回溯法子集树模板解决选排问题示例
2017/09/07 Python
Python之Scrapy爬虫框架安装及使用详解
2017/11/16 Python
使用Python抓取豆瓣影评数据的方法
2018/10/17 Python
解决安装python库时windows error5 报错的问题
2018/10/21 Python
python基础梳理(一)(推荐)
2019/04/06 Python
python3.4+pycharm 环境安装及使用方法
2019/06/13 Python
Python-Seaborn热图绘制的实现方法
2019/07/15 Python
python求质数列表的例子
2019/11/24 Python
Python concurrent.futures模块使用实例
2019/12/24 Python
Python实现电视里的5毛特效实例代码详解
2020/05/15 Python
python3.6.5基于kerberos认证的hive和hdfs连接调用方式
2020/06/06 Python
Hotels.com南非:酒店预订
2017/11/02 全球购物
尤为Wconcept中国官网:韩国设计师品牌服饰
2019/01/10 全球购物
名词解释型面试题(主要是网络)
2013/12/27 面试题
通信工程专业个人找工作求职信范文
2013/09/21 职场文书
大学生毕业自我鉴定
2013/11/06 职场文书
个性与发展自我评价
2014/02/11 职场文书
市场拓展计划书
2014/05/03 职场文书
教师工作自我鉴定范文
2014/09/14 职场文书
2014年政风行风评议工作总结
2014/10/21 职场文书
redis三种高可用方式部署的实现
2021/05/11 Redis
什么是clearfix (一文搞清楚css清除浮动clearfix)
2023/05/21 HTML / CSS