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 相关文章推荐
var与Javascript变量隐式声明
Sep 17 Javascript
jQuery开发者都需要知道的5个小技巧
Jan 08 Javascript
关于Jqzoom的使用心得 jquery放大镜效果插件
Apr 12 Javascript
js前台分页显示后端JAVA数据响应
Mar 18 Javascript
图片无缝滚动代码(向左/向下/向上)
Apr 10 Javascript
JS中setTimeout()的用法详解
Apr 14 Javascript
使用typeof判断function是否存在于上下文
Aug 14 Javascript
jQuery实用技巧必备(中)
Nov 03 Javascript
jQuery点击输入框显示验证码图片
May 19 Javascript
AngularJS 基础ng-class-even指令用法
Aug 01 Javascript
关于javascript事件响应的基础语法总结(必看篇)
Dec 26 Javascript
node前端开发模板引擎Jade的入门
May 11 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简单实现“相关文章推荐”功能的方法
2014/07/19 PHP
php保存信息到当前Session的方法
2015/03/16 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
用于自动添加Digg This!按钮的JavaScript
2006/12/23 Javascript
IE/FireFox具备兼容性的拖动代码
2007/08/13 Javascript
window.location和document.location的区别分析
2008/12/23 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
2012/09/19 Javascript
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
javascript实现倒计时并弹窗提示特效
2015/06/05 Javascript
Webwork 实现文件上传下载代码详解
2016/02/02 Javascript
javascript中活灵活现的Array对象详解
2016/11/30 Javascript
Ionic 2 实现列表滑动删除按钮的方法
2017/01/22 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
2017/03/15 Javascript
JavaScript中发出HTTP请求最常用的方法
2018/07/12 Javascript
Angular 实现输入框中显示文章标签的实例代码
2018/11/07 Javascript
jQuery实现简单评论区功能
2020/10/26 jQuery
python使用内存zipfile对象在内存中打包文件示例
2014/04/30 Python
Python程序设计入门(3)数组的使用
2014/06/16 Python
Python3多线程爬虫实例讲解代码
2018/01/05 Python
python+unittest+requests实现接口自动化的方法
2018/11/29 Python
Django配置文件代码说明
2019/12/04 Python
使用PyOpenGL绘制三维坐标系实例
2019/12/24 Python
Python递归调用实现数字累加的代码
2020/02/25 Python
Python flask路由间传递变量实例详解
2020/06/03 Python
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
夜大毕业生自我鉴定
2013/10/31 职场文书
软件工程师岗位职责
2013/11/16 职场文书
趣味运动会活动方案
2014/02/12 职场文书
管事部库房保管员岗位职责
2014/02/21 职场文书
超市理货员岗位职责
2014/07/04 职场文书
艺术学院毕业生自荐信
2014/07/05 职场文书
校长一岗双责责任书
2015/05/09 职场文书
婚宴主持词
2015/06/30 职场文书
2016反腐倡廉警示教育心得体会
2016/01/13 职场文书
Python合并多张图片成PDF
2021/06/09 Python
Python语言规范之Pylint的详细用法
2021/06/24 Python