html密码的显示与隐藏

眼睛睁开在这里插入图片描述眼睛闭上
在这里插入图片描述

<p>
        <label for="mi">密&nbsp&nbsp&nbsp&nbsp&nbsp码:</label>
        <input type="password" name="密码" id="mi" placeholder="请输入密码">
        <a href="#" id="passwordeye1"><img src="images/眼睛闭上的图片.png" height="15" width="18" id="imag1"/></a>
  </p>

先放眼睛闭上的图片是因为密码框默认是看不见的

<script>
    window.addEventListener('load',function (ev) {
        let eye = window.document.getElementById('passwordeye1');
        eye.addEventListener('click',function () {
            let mi =  window.document.getElementById('mi');
            let type = mi.type;
            if (type === 'password'){
                mi.type = 'text';
            }else{
                mi.type = 'password';
            }
            let ima = window.document.getElementById('imag1');
            if (type === 'password'){
                ima.src="images/眼睛睁开.png";
            }else{
                ima.src="images/眼睛闭上.png";
            }
        })
    })
</script>
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐