JavaScript实现登录框小眼睛

1.html页面

<div class="input-group mb-4 bootint">
     <div class="input-group-prepend">
         <span class="input-group-text"><i class="fa fa-unlock-alt"></i></span>
     </div>
     <input id="password" type="password" name="password" class="form-control" placeholder="Your Password">
     <%--眼睛--%>
     <div style="position: absolute;margin-left: 270px;margin-top: 10px;z-index: 10">
     <a id="eye"><img id="img" src="/images/眼睛_隐藏.png" style="cursor:hand;
     width: 20px;height: 20px;" border=0></a>
     </div>
</div>

2.JS实现

let flag = true;
$('#eye').click(function () {
    if (flag){
        // 修改input类型
        document.getElementById("password").type = "text";
        // 修改图片路径
        document.getElementById("img").src = "/images/眼睛-可见.png";
        flag = false;
        return;
    }
    // 修改input类型
    document.getElementById("password").type = "password";
    // 修改图片路径
    document.getElementById("img").src = "/images/眼睛_隐藏.png";
    flag = true;
})

 

转载于:https://my.oschina.net/u/4107179/blog/3030562