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 相关文章推荐
在html页面上拖放移动标签
Jan 08 Javascript
javascript面向对象包装类Class封装类库剖析
Jan 24 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
Jun 29 Javascript
js控制table合并具体实现
Feb 20 Javascript
JavaScript中的eval()函数使用介绍
Dec 31 Javascript
实例详解angularjs和ajax的结合使用
Oct 22 Javascript
js时间戳和c#时间戳互转方法(推荐)
Feb 15 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
Mar 11 Javascript
Vue程序调试的方法
Jun 17 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
Dec 17 Javascript
微信小程序开发打开另一个小程序的实现方法
May 17 Javascript
在Vuex中Mutations修改状态操作
Jul 24 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
综合图片计数器
2006/10/09 PHP
file_get_contents获取不到网页内容的解决方法
2013/03/07 PHP
浅谈PHP与C#的值类型指向区别的详解
2013/05/21 PHP
PHP准确取得服务器IP地址的方法
2015/06/02 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
jquery库或JS文件在eclipse下报错问题解决方法
2014/04/17 Javascript
浅析jQuery EasyUI中的tree使用指南
2014/12/18 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
javascript中if和switch,==和===详解
2015/07/30 Javascript
CSS中position属性之fixed实现div居中
2015/12/14 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
2016/12/02 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
2016/12/14 Javascript
详解如何在NodeJS项目中优雅的使用ES6
2017/04/22 NodeJs
老生常谈js中的MVC
2017/07/25 Javascript
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
Three.js基础学习之场景对象
2017/09/27 Javascript
全面介绍vue 全家桶和项目实例
2017/12/27 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
2018/03/07 Javascript
Vue 项目分环境打包的方法示例
2018/08/03 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
2020/11/17 Javascript
Python Socket编程详细介绍
2017/03/23 Python
python逆向入门教程
2018/01/15 Python
Python文本统计功能之西游记用字统计操作示例
2018/05/07 Python
Python多线程threading模块用法实例分析
2019/05/22 Python
详解django实现自定义manage命令的扩展
2019/08/13 Python
Win10 安装PyCharm2019.1.1(图文教程)
2019/09/29 Python
Python高阶函数、常用内置函数用法实例分析
2019/12/26 Python
捷克领先的户外服装及配件市场零售商:ALPINE PRO
2018/01/09 全球购物
法国隐形眼镜网站:VisionDirect.fr
2020/03/03 全球购物
2014旅游局党组书记党建工作汇报材料
2014/11/02 职场文书
2014年信访维稳工作总结
2014/12/08 职场文书
最感人的道歉情书
2015/05/12 职场文书
聘任书格式及范文
2015/09/21 职场文书
SpringCloud Alibaba 基本开发框架搭建过程
2021/06/13 Java/Android
Python爬虫中urllib3与urllib的区别是什么
2021/07/21 Python