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

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

AndyGuo2020-06-04 13:06:55web前端8419人已围观

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

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

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啦,希望能帮到大家。

小郭博客

标签云 更多

站长特荐

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