您现在的位置是：首页 > 学无止境 > web前端web前端

JS实现表单密码输入框中点击小眼睛显示隐藏密码

AndyGuo2020-06-04 13:06:55【web前端】8931人已围观

简介最近看到很多网站上的登录页面，在输入密码框上有个小眼睛的图标，点击可以显示输入的密码，这样也更好的确认自己输入的密码是不是对的，那么这个是怎么实现的，看完本篇文章你就会啦

最近看到很多网站上的登录页面，在输入密码框上有个小眼睛的图标，点击可以显示输入的密码，这样也更好的确认自己输入的密码是不是对的，那么这个是怎么实现的，看完本篇文章你就会啦

1、准备两张图片，一张是睁眼，一张是闭眼(可以到阿里巴巴矢量图库寻找免费下载)

最终效果如下：


index.html

 <div>
    密码
  </div>
  <div>
    <input type="password">
    <!--默认闭眼图-->
    <label><img src="1.png" alt="" id="eyes"></label>
  </div>

style.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>

js.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>

大家按照这个代码测试一下就OK啦，希望能帮到大家。

顶一下 （7） 赏 踩一下 （1）
小郭博客

相关文章

最新发表

标签云 更多

点击排行

站长特荐

关闭
QQ 微信 支付宝扫一扫打赏