jQuery显示隐藏密码插件jquery.toggle-password演示

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 jQuery显示隐藏密码插件jquery.toggle-password演示 /h1 div 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 input type="checkbox" id="remember" label for="remember" 记住密码 /label input type="checkbox" id="togglePassword" label for="togglePassword" 显示密码 /label /li input type="submit" value="登录" /li li a 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 ));