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

                                            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"/>
        <span class='seePasswordClass' onclick="seePasswordMethod(this,1)">js查看</span>
        <span class='seePasswordClass' onclick="seePasswordMethod(this,2)">jquery查看</span>
   </body>
</html>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
   /**
   * @todo 鼠标[按住/松开] => [显示/隐藏] 密码
   * @param obj 当前点击对象
   * @param type 类型:1 js点击；2 jquery点击
   */
   function seePasswordMethod(obj, type){
       if( type == 1 ){   //js查看
           var pass=document.getElementById("passwordId")
           obj.onmousedown=function(){
               pass.type="text"
           };
           obj.onmouseup=function(){
            pass.type="password"
        }
       }else if( type == 2 ){   //jquery查看
           $(obj).mousedown(function(){
                $('#passwordId').attr("type", "text");
            });
           $(obj).mouseup(function(){
               $('#passwordId').attr("type", "password");
           });
       }
   }
</script>

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

猜你喜欢