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

最新推荐文章于 2022-05-03 23:16:35 发布

夏已微凉、

最新推荐文章于 2022-05-03 23:16:35 发布

阅读量3.1k

点赞数 1

分类专栏： # Js（JQuery）文章标签： js jquery 密码显示/隐藏

本文链接：https://blog.csdn.net/qq_36025814/article/details/79929293

版权

Js（JQuery）专栏收录该内容

56 篇文章 2 订阅

订阅专栏

                                            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' οnclick="seePasswordMethod(this,1)">js查看</span>
        <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>

夏已微凉、

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Js、Jquery密码输入框的密码显示与隐藏

Js、Jquery密码输入框的密码显示与隐藏 1、基本理解：鼠标左键按下去时,把输入框的属性改为text;鼠标左键松开时,把输入框的属性改为password2、html代码：&lt;html&gt; &lt;head&gt; &lt;meta http-...
复制链接

扫一扫