使用jQuery和JavaScript显示和隐藏密码的方法

这篇文章将为大家详细讲解有关使用jQuery和JavaScript显示和隐藏密码的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

网站建设哪家好，找创新互联公司！专注于网页设计、网站建设、微信开发、小程序制作、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了三都免费建站欢迎大家使用！

为了账户的安全，我们总是会把密码设置的很复杂；当输入密码时，因为密码的不显示，我们不知道输的是对还是错，有可能导致身份验证错误。因而，现在的网站允许用户通过切换来查看密码字段中的隐藏文本。

下面通过代码示例来介绍使用jQuery和JavaScript显示和隐藏密码的方法。

HTML代码：首先我们需要创建了基本表单布局

 

  
Username : 
  

 
 

  
Password : 
  
 
       Show
 
 

  
 
  

 

说明：在复选框元素上附加onchange="togglePassword()"事件，调用js代码，实现切换密码的显示（或隐藏）

1、使用JavaScript实现

说明：

检查复选框的状态是否为选中，选中则input框的type属性切换为text，未选中则type属性保持为password。

效果图：

2、使用jQuery实现

导入jQuery库

使用jQuery的attr()方法更改input元素的type属性。

输出：

关于使用jQuery和JavaScript显示和隐藏密码的方法就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。