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="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.ο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>