html密码的显示与隐藏

甜甜今天学了吗

已于 2022-01-26 16:19:31 修改

阅读量5.2k

点赞数 6

文章标签： html 前端 javascript

于 2022-01-21 13:44:46 首次发布

本文链接：https://blog.csdn.net/dawanhjiao/article/details/122619726

版权

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>