html密码的显示与隐藏

html密码的显示与隐藏

眼睛睁开眼睛闭上

<p>
        <label for="mi">密     码：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>