Js、Jquery密码输入框的密码显示与隐藏

424 阅读1分钟

                                            Js、Jquery密码输入框的密码显示与隐藏

1、基本理解:
鼠标左键按下去时,把输入框的属性改为text;鼠标左键松开时,把输入框的属性改为password
2、html代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js,jquery密码输入框的密码显示与隐藏</title>
<style type="text/css">
/**样式*/
.seePasswordClass{color:#4DAAF6}
.seePasswordClass:hover{color:red;text-decoration:underline;cursor:pointer}
</style>
</head>
<body>
密码:<input type="password" id="passwordId" value="20180413test"/>
&nbsp;<span class='seePasswordClass' οnclick="seePasswordMethod(this,1)">js查看</span>
&nbsp;<span class='seePasswordClass' οnclick="seePasswordMethod(this,2)">jquery查看</span>
</body>
</html>
<script src="libs.baidu.com/jquery/2.1.…>
<script>
/**
* @todo 鼠标[按住/松开] => [显示/隐藏] 密码
* @param obj 当前点击对象
* @param type 类型:1 js点击;2 jquery点击
*/
function seePasswordMethod(obj, type){
if( type == 1 ){    //js查看
var pass=document.getElementById("passwordId")  
obj.οnmοusedοwn=function(){  
pass.type="text"  
};  
obj.οnmοuseup=function(){  
pass.type="password"  
}  
}else if( type ==  2 ){    //jquery查看
$(obj).mousedown(function(){  
$('#passwordId').attr("type", "text");  
});  
$(obj).mouseup(function(){  
$('#passwordId').attr("type", "password");  
});
}
}
</script>