码云笔记前端博客
Home > JavaScript > js jquery多种方法实现input密码输入框的隐藏和显示

js jquery多种方法实现input密码输入框的隐藏和显示

2018-06-20 分类:JavaScript 作者:管理员 阅读(1771)

本文共计4348个字,阅读时间预计11分钟,干货满满,记得点赞加收藏哦

最近在做项目时,遇到这么一个需求,就是要实现对登录页面的input密码输入框的隐藏和显示效果,即默认隐藏,点击显示隐藏的密码,再次点击隐藏输入的密码。相信大家都见过类似登录页的效果,毕竟因为人生太短暂,不要浪费时间重新输入密码,为了方便下次登录,很多项目登录页都采用此效果,所以这里就不多说了,直接我们看实现的方法,这里码云笔记准备了三种实现方法,当然各有利弊。

效果

js jquery多种方法实现input密码输入框的隐藏和显示

原理

就是点击切换password为text等显示。默认情况下,输入的密码的 input 标签 

1
type="password"

,默认密码用小点或星号表示。要密码可见所以我们需要将

1
type

修改为

1
"text"

。在 Chrome、FireFox 等浏览器中通过修改 input 标签的 

1
type

 属性轻松实现该效果,但是 IE 下就会报错。如果你需要兼容IE,就必须考虑其他方案。

HTML代码

1
2
3
4
5
6
<div class="password_wrap">
<div class="password_input">
<input type="password" name="key" value="mybj123.com" class="bi_input" autocomplete="off" />
</div>
<i class="bt_showpwd off"></i>
</div>

css代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
@font-face {
font-family: 'iconfont';
/* project id 674189 */
src: url('//at.alicdn.com/t/font_674189_dvawifegwrj.eot');
src: url('//at.alicdn.com/t/font_674189_dvawifegwrj.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_674189_dvawifegwrj.woff') format('woff'), url('//at.alicdn.com/t/font_674189_dvawifegwrj.ttf') format('truetype'), url('//at.alicdn.com/t/font_674189_dvawifegwrj.svg#iconfont') format('svg');
}

.iconfont {
display: inline-block;
font-family: 'iconfont';
font-style: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-text-stroke-width: 0.2px;
}

.bi_input {
box-sizing: border-box;
height: 40px;
padding: 8px 10px;
line-height: 24px;
border: 1px solid #DDDDDD;
color: #5F5F5F;
font-size: 14px;
vertical-align: middle;
border-radius: 4px;
width: 330px;
}

.bi_input:hover {
border: 1px #659aea solid;
}

.bi_input:focus {
outline: none;
border: 1px solid #4F9FE9;
box-shadow: 0 0 3px 0 #2171BB;
color: #595959;
}

.password_wrap {
position: relative;
width: 330px;
}

.password_wrap .bt_showpwd {
color: #999999;
position: absolute;
top: 8px;
right: 10px;
line-height: 24px;
width: 24px;
height: 24px;
text-align: center;
cursor: pointer;
}

.password_wrap .bt_showpwd.off::before {
content: "\e60a";
font-family: "iconfont";
font-size: 18px;
}

.password_wrap .bt_showpwd.on::before {
content: "\e60b";
font-family: "iconfont";
font-size: 18px;
}

方法一:javascript实现

HTML代码:

1
2
<input type="password" name="" id="pass" value="123456" class="pass"/>
<input type="button" name="" id="btn" value="点击显示" />

主要用到的知识点:
onmousedown:鼠标按下时事件
示例:document.getElementById("btn").onmousedown=function(){};
onmouseup:鼠标按键被松开时事件
示例:document.getElementById("btn").onmouseup=function(){};

1
2
3
4
5
6
7
8
9
10
window.onload = function() {
var btn = document.getElementById("btn");
var pass = document.getElementById("pass")
btn.onmousedown = function() {
pass.type = "number"
};
btn.onmouseup = btn.onmouseout = function() {
pass.type = "password"
}
}

方法二:jquery实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(".bt_showpwd").on("click", function(e) {
e.preventDefault();
var $this = $(this);
var $password = $this.closest(".password_wrap");
var $input = $password.find('input');
var $inputWrap = $password.find('.password_input');
var newinput = '',
inputHTML = $inputWrap.html(),
inputValue = $input.val();
if($input.attr('type') === 'password') {
newinput = inputHTML.replace(/type\s*=\s*('|")?password('|")?/ig, 'type="text"');
$inputWrap.html(newinput).find('input')[0].value = inputValue;
$this.removeClass("
off").addClass("on");
} else {
newinput = inputHTML.replace(/type\s*=\s*('|"
)?text('|")?/ig, 'type="password"');
$inputWrap.html(newinput).find('
input')[0].value = inputValue;
$this.removeClass("on").addClass("off");
}
});

这里有几点需要说明的是:

1、示例使用了替换整个 input 标签方案,所以可以兼容IE

2、眼睛的图表使用了 iconfont ,这样使用CSS切换比较简单。
3、在 IE10 +浏览器中,遇到密码输入框的时候,框内会自行显示一个小眼睛的图标,点击后也能显示密码,如果是普通文本输入框,则IE10会自动显示一个小叉,点击后可以清空文本框已输入的内容,如果不想要IE10自带的这两个功能生效,可以在CSS里加入:

1
2
input::-ms-clear {display:none;}
input::-ms-reveal {display:none;}

这两个针对IE浏览器的CSS定义便可去掉IE浏览器自动显示的文本清除和显示密码的功能

方法三:jQuery插件实现

先贴上下载地址:hideShowPassword插件

这个插件可以让你轻松隐藏和显示一个密码输入字段的内容。

你可以在你的项目目录中安装hideShowPassword插件。

用法

如果所有你需要做的是改变密码字段的可见性,您可以使用速记方法:

1
2
3
$('#password').showPassword()// Reveal
$('#password').hidePassword()// Hide
$('#password').togglePassword()// Toggle

你可以通过传递TRUE,FALSE或'切换'到hideShowPassword方法做同样的事情:

1
2
3
$('#password').hideShowPassword(true)// Reveal
$('#password').hideShowPassword(false)// Hide
$('#password').hideShowPassword('toggle')// Toggle

如果你想调整超过了可见性,您可以传递一个对象到hideShowPassword :

1
2
3
4
5
6
$('#password').hideShowPassword({
show: true, // Reveal the password
innerToggle: true, // Create an inner toggle
hideToggleUntil: 'focus'// Hide the toggle till focus
touchSupport: Modernizr.touch // Enable touch enhancements
});

如果您需要更改这些密码字段的可见性反应,你可以使用passwordShown和passwordHidden事件:

1
2
3
4
5
$('#password').on('passwordShown', function () {
    console.log('password is visible');
}).on('passwordHidden', function () {
    console.log('password is hidden');
});

结束语

以上就是今天码云笔记给大家带来的三种实现input密码输入框的显示隐藏效果方法,希望对大家有用,也希望大家积极留言探讨。

「除特别注明外,本站所有文章均为码云笔记原创,转载请保留出处!」

赞(2) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
2

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - js jquery多种方法实现input密码输入框的隐藏和显示

博客简介

码云笔记 mybj123.com,一个专注Web前端开发技术的博客,主要记录和总结博主在前端开发工作中常用的实战技能及前端资源分享,分享各种科普知识和实用优秀的代码,以及分享些热门的互联网资讯和福利!码云笔记有你更精彩!
更多博客详情请看关于博客

精彩评论

站点统计

  • 文章总数: 476 篇
  • 分类数目: 13 个
  • 独立页面: 8 个
  • 评论总数: 228 条
  • 链接总数: 15 个
  • 标签总数: 1050 个
  • 建站时间: 525 天
  • 访问总量: 8648101 次
  • 最近更新: 2019年11月21日