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 相关文章推荐
javascript动画对象支持加速、减速、缓入、缓出的实现代码
Sep 30 Javascript
解析JSON对象与字符串之间的相互转换
Dec 18 Javascript
node.js中的Socket.IO使用实例
Nov 04 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
Aug 19 Javascript
H5移动端适配 Flexible方案
Oct 24 Javascript
快速解决js中window.location.href不工作的问题
Nov 02 Javascript
JQuery学习总结【一】
Dec 01 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
React Native 图片查看组件的方法
Mar 01 Javascript
React组件内事件传参实现tab切换的示例代码
Jul 04 Javascript
JS实现简单随机3D骰子
Oct 24 Javascript
在vue-cli创建的项目中使用sass操作
Aug 10 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伪静态之APACHE篇
2014/06/02 PHP
用PHP代码给图片加水印
2015/07/01 PHP
Yii2中cookie用法示例分析
2016/07/18 PHP
PHP+jquery+CSS制作头像登录窗(仿QQ登陆)
2016/10/20 PHP
PHP+Ajax实现的检测用户名功能简单示例
2019/02/12 PHP
Gambit vs CL BO3 第三场 2.13
2021/03/10 DOTA
JavaScript函数模式详解
2014/11/07 Javascript
js QQ客服悬浮效果实现代码
2014/12/12 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
2015/10/20 Javascript
JS禁止查看网页源代码的实现方法
2016/10/12 Javascript
深入理解vue2.0路由如何配置问题
2017/07/18 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
2018/02/09 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
2019/10/12 jQuery
JavaScript的console命令使用实例
2019/12/03 Javascript
jquery实现简单拖拽效果
2020/07/20 jQuery
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
pandas 对每一列数据进行标准化的方法
2018/06/09 Python
python中pika模块问题的深入探究
2018/10/13 Python
Python两台电脑实现TCP通信的方法示例
2019/05/06 Python
Python利用逻辑回归分类实现模板
2020/02/15 Python
Python3如何判断三角形的类型
2020/04/12 Python
Python3通过chmod修改目录或文件权限的方法示例
2020/06/08 Python
python中的对数log函数表示及用法
2020/12/09 Python
怎样实现H5+CSS3手指滑动切换图片的示例代码
2019/05/05 HTML / CSS
英国网上购买门:Direct Doors
2018/06/07 全球购物
酒店销售经理岗位职责
2014/01/31 职场文书
网络技术专业推荐信
2014/02/20 职场文书
英语专业职业生涯规划范文
2014/03/05 职场文书
教师应聘自荐信范文
2014/03/14 职场文书
小学生演讲稿大全
2014/04/25 职场文书
关爱残疾人标语
2014/06/25 职场文书
2014年小学教师工作总结
2014/11/10 职场文书
幼儿园感谢信
2015/01/21 职场文书
表彰大会新闻稿
2015/07/17 职场文书
利用python实时刷新基金估值(摸鱼小工具)
2021/09/15 Python
php png失真的原因及解决办法
2021/11/17 PHP