登录页密码框加密输入不知道对错,加个小眼睛方便查看和修改,下面是小眼睛效果图,如果不喜欢这个图标可以自己去阿里图标库自己选择下载。
一个输入框小眼睛显示或隐藏:
html代码(因为只把密码输入框展示出来了,所以样式自行调整,只给你们展示功能代码)
<div class="login_ipt">
<input class="pwd" id="pwd" type="password" placeholder="请输入密码">
<img class="eye" id="eye" src="./images/eye.png" alt="">
</div>
js代码
// 1.获取元素
var eye = document.getElementById('eye');
var pwd = document.getElementById('pwd');
// 2.注册事件 处理程序
var flag = 0;
eye.onclick = function () {
// 点击一次之后,flag一定要变化
if (flag == 0) {
pwd.type = 'text';
eye.src = './images/eye_active.png';
flag = 1; //赋值操作
} else {
pwd.type = 'password';
eye.src = './images/eye.png';
flag = 0;
}
}
多个输入框小眼睛显示或隐藏:
HTML
<div class="cont">
<input id="pwd0" type="password" placeholder="请输入原密码">
<img id="eye0" src="./images/eye.png" alt="" onclick="showPwd()">
</div>
<div class="cont">
<input id="pwd1" type="password" placeholder="请输入新密码">
<img id="eye1" src="./images/eye.png" alt="" onclick="showPwd()">
</div>
<div class="cont">
<input id="pwd2" type="password" placeholder="请确认新密码">
<img id="eye2" src="./images/eye.png" alt="" onclick="showPwd()">
</div>
JS
function showPwd() {
var index = event.target.id.substr(-1);//取出id(eye0)最后的数字
if ($("#pwd"+index).attr("type") == "text") {
$("#pwd"+index).attr("type", "password");
$("#eye"+index).attr("src", "./images/eye.png");
}
else {
$("#pwd"+index).attr("type", "text");
$("#eye"+index).attr("src", "./images/eye_a.png");
}
}