LAYUI登陆密码设置明文密文

LAYUI登陆密码设置明文密文

html页面

 <div class="layui-form-item">
    <label class="layui-form-label">账号</label>
     <div class="layui-input-block">
     <input type="text" name="username" required  lay-verify="required"  autocomplete="off" class="layui-input">
     </div>
 </div>
 <div class="layui-form-item ">
     <label class="layui-form-label">密码</label>
     <div class="layui-input-block psd_icon">
     <input type="password" id="password" name="password" required lay-verify="required"  autocomplete="off" class="layui-input">
     <img id="img" onclick="hideShowPsw()"
     src="/img/login/icon_hidden.png">
     </div>
 </div>

css代码

.psd_icon{
    position: relative;
}
.psd_icon img{
    position: absolute;
    right: 10px;
    top: 2px;
}

js代码

function hideShowPsw(){  
    var demoImg = document.getElementById("img");
    var PWD = document.getElementById("password");
    console.log(PWD.type)
    if (PWD.type == "password") {
        PWD.type = "text";
        demoImg.src = "/img/login/icon_visible.png"; //图片路径（争眼图片）
    } else {
        PWD.type = "password";
        demoImg.src = "/img/login/icon_hidden.png"; // 图片路径（闭眼图片）
    }
}