利用JavaScript制作一个简单的可转换隐藏/明文登录密码输入框

一、样式代码

            .box {
                position: relative;
                width: 400px;
                border-bottom: 1px solid #ccc;
                margin: 100px auto;
            }

            .box input {
                width: 370px;
                height: 30px;
                border: 0;
                outline: none;
            }
            .box img {
                position: absolute;
                top: 2px;
                right: 2px;
                width: 24px;

            }

二、密码框及图标

<div class="box">
            <label>
                <img src="close.png" id="eye">
            </label>
            <input type="password" name="" id="pwd" value="" />

        </div>

三、事件处理

            //获取元素
            var eye = document.getElementById('eye');
            var pwd = document.getElementById('pwd');

            var flag =0;
            //注册事件 处理程序
            eye.onclick = function() {
                if(flag ==0){
                    pwd.type = 'text';
                    eye.src = 'open.png';
                    flag = 1;
                }
                else{
                    pwd.type = "password";
                    eye.src = 'close.png';
                    flag = 0;
                }


            }

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

插入图片