<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>密码显示和隐藏</title>
</head>
<body>
<div id="box">
<p>密码的显示和隐藏</p>
<form name="forms" action="" method="post">
<label for="">密码</label>
<span class="box"><input id="sp" type="password" name="psw" id="psw" value="12345678" /></span>
<span class="box" id="btn"><a href="javascript:showPsw();">显示密码</a></span>
</form>
</div>
</body>
<script>
// 判断 input的type是password还是text.切换即可
var ele = {
sp : document.getElementById('sp'),
btn : document.getElementById('btn'),
showP : '<a href="javascript:showPsw();">显示密码</a>',
hideP : '<a href="javascript:hidePsw();">隐藏密码</a>'
}
function showPsw(){
if(ele.sp.type==='password'){
ele.sp.type = 'text';
ele.btn.innerHTML = ele.hideP;
}
}
function hidePsw(){
if(ele.sp.type==='text'){
ele.sp.type = 'password';
ele.btn.innerHTML = ele.showP;
}
}
</script>
</html>
效果如下：
初始隐藏状态
显示状态
网友评论