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 相关文章推荐
统一接口:为FireFox添加IE的方法和属性的js代码
Mar 25 Javascript
JS 动态加载脚本的4种方法
May 05 Javascript
JQuery 国际象棋棋盘 实现代码
Jun 26 Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
Apr 27 Javascript
javascript中apply和call方法的作用及区别说明
Feb 14 Javascript
JS获取随机数函数可自定义最小值最大值
May 08 Javascript
微信小程序 火车票查询实例讲解
Oct 17 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
Apr 13 Javascript
Javascript es7中比较实用的两个方法示例
Jul 21 Javascript
详解node.js中的npm和webpack配置方法
Jan 21 Javascript
Vue项目中配置pug解析支持
May 10 Javascript
小程序使用wxs解决wxml保留2位小数问题
Dec 13 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 &amp;&amp; 逻辑与运算符使用说明
2010/03/04 PHP
php url地址栏传中文乱码解决方法集合
2010/06/25 PHP
IIS6.0 开启Gzip方法及PHP Gzip函数分享
2014/06/08 PHP
php递归遍历删除文件的方法
2015/04/17 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
JAVASCRIPT  THIS详解 面向对象
2009/03/25 Javascript
利用WebBrowser彻底解决Web打印问题(包括后台打印)
2009/06/22 Javascript
js图片自动切换效果处理代码
2013/05/07 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
2013/06/29 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
2016/05/26 Javascript
jQuery 判断是否包含在数组中Array[]的方法
2016/08/03 Javascript
基于Vue实现微信小程序的图文编辑器
2018/07/25 Javascript
如何制作一个Node命令行图像识别工具
2018/12/12 Javascript
js Math数学简单使用操作示例
2020/03/13 Javascript
Python2随机数列生成器简单实例
2017/09/04 Python
快速入门python学习笔记
2017/12/06 Python
详解appium+python 启动一个app步骤
2017/12/20 Python
python利用Tesseract识别验证码的方法示例
2019/01/21 Python
django 做 migrate 时 表已存在的处理方法
2019/08/31 Python
Python socket聊天脚本代码实例
2020/01/02 Python
Python创建空列表的字典2种方法详解
2020/02/13 Python
python 解决print数组/矩阵无法完整输出的问题
2020/02/19 Python
Python实现捕获异常发生的文件和具体行数
2020/04/25 Python
html5中如何将图片的绝对路径转换成文件对象
2018/01/11 HTML / CSS
美国伊甸园兄弟种子公司:Eden Brothers
2018/07/01 全球购物
Ray-Ban雷朋西班牙官网:全球领先的太阳眼镜品牌
2018/11/28 全球购物
工作决心书
2014/03/11 职场文书
学校安全生产承诺书
2014/05/23 职场文书
营销总监岗位职责
2014/09/16 职场文书
个人贷款收入证明
2014/10/26 职场文书
课外活动总结
2015/02/04 职场文书
2015年药房工作总结
2015/04/25 职场文书
2015年社区宣传工作总结
2015/05/20 职场文书
结婚仪式主持词
2015/06/29 职场文书
SqlServer: 如何更改表的文件组?(进而改变存储位置)
2021/04/05 SQL Server
pytorch 实现变分自动编码器的操作
2021/05/24 Python