<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>jQuery显示隐藏密码插件jquery.toggle-password演示_dowebok</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font: 14px Arial, sans-serif;
color: red;
}
input {
font-family: Arial, sans-serif;
}
.login {
width: 270px;
margin: 0 auto;
padding: 10px 70px;
background-color: pink;
border: 1px solid green;
border-radius: 32px;
}
.login ul {
list-style-type: none;
}
.login li {
padding: 10px 0;
overflow: hidden;
}
.login .li3,
.login .li5 {
text-align: right;
font-size: 12px;
border: 1px solid red;
padding: 10px;
}
.login .li3 input {
/*width: 13px;
height: 13px;*/
margin: 0 3px 0 20px;
vertical-align: middle;
border: 11px solid blue;
}
.login .submit {
display: block;
width: 100%;
padding: 16px 0;
border: 1px solid red;
color: green;
background-color: greenyellow;
cursor: pointer;
border-radius: 10px;
}
#email,
#password {
width: 214px;
padding: 5px;
border: 1px solid red;
}
.forgot {
color: blue;
}
</style>
<script src="js/jquery-1.9.0.min.js"></script>
<script src="js/jquery.toggle-password.js"></script>
<script>
$(function() {
$('#password').togglePassword({
el: '#togglePassword'
});
});
</script>
</head>
<body>
<h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">jQuery显示隐藏密码插件jquery.toggle-password演示</h1>
<div class="login">
<ul>
<li><span><label for="email">邮箱：</label></span>
<input id="email" type="text">
</li>
<li><span><label for="password">密码：</label></span>
<input id="password" type="password">
</li>
<li class="li3">
<input type="checkbox" id="remember">
<label for="remember">记住密码</label>
<input type="checkbox" id="togglePassword">
<label for="togglePassword">显示密码</label>
</li>
<li class="li4">
<input class="submit" type="submit" value="登录">
</li>
<li class="li5"><a class="forgot" href="javascript:">忘记密码？</a></li>
</ul>
</div>
</body>
</html>jquery.toggle-password.js：
(function ( $ ) {
$.fn.togglePassword = function( options ) {
var s = $.extend( $.fn.togglePassword.defaults, options ),
input = $( this );
$( s.el ).bind( s.ev, function() {
"password" == $( input ).attr( "type" ) ?
$( input ).attr( "type", "text" ) :
$( input ).attr( "type", "password" );
});
};
$.fn.togglePassword.defaults = {
ev: "click"
};
}( jQuery ));
