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' ο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>

Js、Jquery密码输入框的密码显示与隐藏相关推荐

密码显示与隐藏效果 html+css+js
先看效果: 前言: 一般在我们要输入密码的时候都可以让自己输入的密码显示或者隐藏,所以我做了一个简约的密码框~ 实现: 定义html的输入框的标签,kuang为底层盒子,password为输入框,co ...
html选择按键点击后锁死输入框_js实现的键盘开启大写锁定提示和密码显示与隐藏的效果...
不知道大家注意到没有,很多人性话的网站再输入密码的时候,如果开启大写锁定下过(切换键A左边的Cap Lock按键),那么就会给出一个提示,因为很多时候密码验证是区分大小写的,如果不小心开启或者关闭大小 ...
使用正则表达式实现注册表单验证（包括下拉列表二级联动、密码显示和隐藏）...
根据所学知识和查找网上资料所写,有错误或不足之处欢迎指正. 实现的效果如下图(网络图片)所示: 开始写代码注册html页面--先简单的利用table标签和input标签写出来(上面的图片用PS制作) ...
vantUi密码框密码显示与隐藏（密文/明文）
问题 vantUI开发登录界面,密码输入框没有常用的密码显示与隐藏功能. 解决没有现成的功能,只能通过如下方法曲线实现功能: 通过输入框可以增加右侧的图标,增加一个eye的图标动态设置输入框的类型 ...
html元素隐藏js 控制,JS控制HTML元素的显示和隐藏的两种方法
JS控制HTML元素的显示和隐藏的两种方法利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一 ...
html中怎么实现广告自动出来又自动隐藏?,基于jquery实现的定时显示与隐藏div广告的实现代码...
基于jquery实现的定时显示与隐藏div广告的实现代码下面我给大家分享我的方法: 在jquery中要显示与隐藏层是很简单的直接使用hide与show方法就可以了,但要定时我们需要利用setTime ...
JS控制HTML元素的显示和隐藏
利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: document.getElementB ...
jquery点击按钮显示和隐藏div
[转]jquery点击按钮显示和隐藏DIv 1 function changeDisplay() { 2 if ($("#btnShow").attr("value&qu ...
html显示隐藏内容点击显示数据表代码,js如何实现点击显示和隐藏表格
js如何实现点击显示和隐藏表格一.总结一句话总结: 1.给table或者table里面的元素添加点击事件, 2.然后判断当前表格的数据显示或者隐藏, 3.然后通过display属性显示(非none ...
js控制元素显示与否JS控制HTML元素的显示和隐藏
转载:https://www.cnblogs.com/unpolishedgem/p/3247098.html 利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个 ...

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

Js、Jquery密码输入框的密码显示与隐藏相关推荐

最新文章

热门文章