js、jquery分别实现点击密码输入框密码显示和隐藏

很多密码框都有个眼睛标记,点击能显示密码。原理就是用点击事件切换password为text或number来实现,但通常改为text来实现。

主要知识点:

onmousedown:鼠标按下时事件

示例:document.getElementById("btn").onmousedown=function(){};

onmouseup:鼠标按键被松开时事件

示例:document.getElementById("btn").onmouseup=function(){};

onclick:鼠标点击事件

示例:document.getElementById("btn").onclick=function(){};

一:鼠标按下时显示密码,离开时隐藏密码

1.html代码

 

2.方法一:js代码实现

 

方法二:jquery代码实现

一dome01:演示链接

注意:jquery有一个缺点,那就是IE浏览器不支持修改type,所以建议用js实现。

 

二:使用js实现单击按钮时显示密码,再次单击时隐藏密码的循环切换功能。

原理:

1.通过getElementById获取到输入框的type和按钮。当按钮添加一个onclick事件,改变输入框的type值为text,使密码显示;再次点击时改变type值为password,使密码隐藏。

2.定义一个变量a并赋值为true,在第一次调用onclick事件后将其赋值为false,并通过 if 语句实现循环切换功能。

源代码:

一dome02:演示链接

 

  • 我的微信
  • 我的微信扫一扫
  • weinxin
  • 我的QQ
  • 我的QQ扫一扫
  • weinxin
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: