关于密码的显示和隐藏

我们经常在开发中经常遇到密码是以密码的格式显示还是以文本的格式显示，在这给大家提供一个小思路，以后遇到了可以参考参考

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .pass{
                width:200px;
                height: 20px;
            }
        </style>
        <script type="text/javascript" src="jquery1.12.3.js"></script>
        <script>
            /**
             * 普通js方法鼠标事件模拟密码显示隐藏
             */
            /* window.onload=function(){
                var btn=document.getElementById("btn");
                var pass=document.getElementById("pass")
                btn.onmousedown=function(){
                    pass.type="number"
                };
                btn.onmouseup=btn.onmouseout=function(){
                    pass.type="password"
                }
            }
            */
            /**
            * Jquery click事件实现密码显示隐藏
            */
            $(document).ready(function(){
                $("#btn").click(function(){
                //$("#w3s").attr("href")
                    if($("#pass").attr("type")=="password"){
                        $("#pass").attr({type:"text"});
                    }else{
                        $("#pass").attr({type:"password"});
                    }
                });
            });
            /**
             * JQuery鼠标事件模拟密码显示隐藏
            */
            /* $(function(){
            $("#btn").mousedown(function(){
                    $("#pass").attr({type:"text"});
               });
               $("#btn").mouseup(function(){
                    $("#pass").attr({type:"password"});
               });
            });*/
        </script>
    </head>
    <body>
        <input type="password" name="" id="pass" value="123456" class="pass"/>
        <input type="button" name="" id="btn" value="点击显示" />
    </body>
</html>

 

posted @ 2017-06-11 22:15  谭翔随笔  阅读(659)  评论(0)  编辑  收藏  举报