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 相关文章推荐
超酷的网页音乐播放器DewPlayer使用方法
Dec 18 Javascript
关于html+ashx开发中几个问题的解决方法
Jul 18 Javascript
滚动图片效果 jquery实现回旋滚动效果
Jan 08 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
Aug 19 Javascript
ajax在兼容模式下失效的快速解决方法
Mar 22 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
Aug 15 Javascript
简单实现JavaScript图片切换效果
Nov 28 Javascript
jsp 自动编译机制详细介绍
Dec 01 Javascript
jQuery中get方法用法分析
Dec 07 Javascript
node.js中使用Export和Import的方法
Sep 18 Javascript
原生js添加一个或多个类名的方法分析
Jul 30 Javascript
基于html+css+js实现简易计算器代码实例
Feb 28 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 抽象类的简单应用
2011/09/06 PHP
基于PHP读取csv文件内容的详解
2013/06/18 PHP
浅谈PHP定义命令空间的几个注意点(推荐)
2016/10/29 PHP
一个多次搜索+多次传值的解决方案
2007/01/20 Javascript
Display SQL Server Version Information
2007/06/21 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
2013/03/11 Javascript
Javascript正则控制文本框只能输入整数或浮点数
2014/09/02 Javascript
jQuery中:input选择器用法实例
2015/01/03 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
bootstrap提示标签、提示框实现代码
2016/12/28 Javascript
jquery dataTable 后台加载数据并分页实例代码
2017/06/07 jQuery
30分钟快速入门掌握ES6/ES2015的核心内容(上)
2018/04/18 Javascript
jQuery实现购物车的总价计算和总价传值功能
2018/11/28 jQuery
在vue使用clipboard.js进行一键复制文本的实现示例
2019/01/15 Javascript
微信小程序云开发修改云数据库中的数据方法
2019/05/18 Javascript
LayUI动态设置checkbox不显示的解决方法
2019/09/02 Javascript
python 捕获shell脚本的输出结果实例
2017/01/04 Python
Python递归实现汉诺塔算法示例
2018/03/19 Python
python对html过滤处理的方法
2018/10/21 Python
Python图像滤波处理操作示例【基于ImageFilter类】
2019/01/03 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
详解Python解决抓取内容乱码问题(decode和encode解码)
2019/03/29 Python
Python pandas实现excel工作表合并功能详解
2019/08/29 Python
浅谈Python中的异常和JSON读写数据的实现
2020/02/27 Python
Python编程快速上手——选择性拷贝操作案例分析
2020/02/28 Python
python opencv pytesseract 验证码识别的实现
2020/08/28 Python
python用700行代码实现http客户端
2021/01/14 Python
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
2019/01/18 HTML / CSS
美国知名女性服饰品牌:New York & Company
2017/03/23 全球购物
英国护发和美妆在线商店:Klip Shop
2019/03/24 全球购物
Scotch Porter官方网站:男士美容产品
2020/08/31 全球购物
营销主管自我评价怎么写
2013/09/19 职场文书
应届生船舶驾驶求职信
2013/10/19 职场文书
素质拓展感言
2014/01/29 职场文书
仓库组长岗位职责
2014/01/29 职场文书
公务员党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书