如何实现密码的显示和隐藏？

如图所示，我们在登录账号的时候经常会看到密码的显示和隐藏是可以进行切换的，那么到底怎么实现这个功能呢？

其实原理很简单：
通过点击事件将密码输入框的属性"password"改为"text"属性，即可实现密码的显示；
同理，将"text"属性改回"passowrd"属性即可实现密码的重新隐藏。

步骤如下：

1.先准备两张图片，放置到你想放置的文件夹（或者你也可以写一个button按钮）

2.导入jquery的.js文件

<script type="text/javascript" src="/Scripts/jquery-1.7.min.js"></script>

3.开撸代码：

<span>密码:</span><input id="pwd" type="password" name="password" class="text" />
<img src="/images/eyes/open.jpg" width="30" height="30">

$(function () {// 通过点击事件实现密码的显示或隐藏功能$("#pwd").next().click(function () {// 通过id选择器获取当前输入框的属性var type = $("#pwd").attr("type");/*** 若当前属性为“password”,则切换图片，并修改属性为“text”，实现密码的显示功能* 若当前属性为“text"，同样切换图片，并修改属性为”password",实现密码的再次隐藏功能*/if(type == "password"){$("#pwd").next().attr("src","/images/eyes/close.jpg");$("#pwd").next().css({"width":"30", "height":"30"});$("#pwd").prop("type", "text");}else {$("#pwd").next().attr("src","/images/eyes/open.jpg");$("#pwd").next().css({"width":"30", "height":"30"});$("#pwd").prop("type", "password");}});
});

如何实现密码的显示和隐藏？相关推荐

微信小程序input输入框密码的显示与隐藏
1.实现效果 2.实现原理 input的type之中并无password属性. 小程序提供了一个password属性,用来表示是否是密码类型. 关键思路:动态改变password的值,从而实现密码的显 ...
密码的显示与隐藏php,el-input 标签中密码的显示和隐藏功能的实例代码
效果展示: 密码隐藏: 密码显示: 代码展示: 一:标签代码二: var app = new Vue({ el:"#app", data:{ users:[], total:10 ...
html密码的显示与隐藏
html密码的显示与隐藏眼睛睁开眼睛闭上 <p><label for="mi">密&nbsp&nbsp&nbsp&nbsp ...
登录页面的密码的显示与隐藏
登录用户密码的显示与隐藏(样式自行定义,仅写了简单的代码): html部分: <div class="form-group"><img src="img ...
C#实现登录界面，密码星号显示（隐藏输入密码）
C#实现登录界面,密码星号显示(隐藏输入密码) 属性解释代码效果工程在软件设计时,往往需要设置用户的登录权限.用户在填写密码时,如何实现输入隐藏,或者以"*"号进行隐藏显示 ...
vue基于 input 实现密码的显示与隐藏功能
目录前言: 一.准备图标二.Vue程序界面的展示三.代码总结: 前言: 大家都知道,一般情况下,输入框的密码我们是看不到密码的,只有当我们点击查看密码的小图标时,密码才会显现出来,实现起来也非 ...
JavaScript实现登录密码的显示和隐藏
使用js仅实现密码框信息的显示是简单的,重点在点击显示密码后再实现点击隐藏的效果这里通过标记法实现.定义了一个flag=false的变量,在编写点击效果时,使!flag,此时flag=true,进行 ...
html密码框不显示,密码框中密码的显示与隐藏切换(JS)
目标: 点击小眼睛后, 1.密码框变成文本框: 2.小眼睛图片由闭眼变成睁眼: 3.再次点击后,又变成闭眼+密码框要想实现3,方法1: 则需要一个变量,来辅助判断当前input的属性,如果flag为 ...
html选择按键点击后锁死输入框_js实现的键盘开启大写锁定提示和密码显示与隐藏的效果...
不知道大家注意到没有,很多人性话的网站再输入密码的时候,如果开启大写锁定下过(切换键A左边的Cap Lock按键),那么就会给出一个提示,因为很多时候密码验证是区分大小写的,如果不小心开启或者关闭大小 ...

如何实现密码的显示和隐藏？

如图所示，我们在登录账号的时候经常会看到密码的显示和隐藏是可以进行切换的，那么到底怎么实现这个功能呢？

步骤如下：

如何实现密码的显示和隐藏？相关推荐

最新文章

热门文章