企业网站,个人博客等WordPress网站以及其他语言网站开发定制需求加QQ详聊。

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

JavaScript笔记 码云 83℃ 0评论
目录
[隐藏]

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

效果

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

原理

就是点击切换password为text等显示。默认情况下,输入的密码的 input 标签 type="password",默认密码用小点或星号表示。要密码可见所以我们需要将type修改为"text"。在 Chrome、FireFox 等浏览器中通过修改 input 标签的 type 属性轻松实现该效果,但是 IE 下就会报错。如果你需要兼容IE,就必须考虑其他方案。

HTML代码

<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代码

@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代码:

<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(){};

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实现

$(".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里加入:

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

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

方法三:jQuery插件实现

先贴上下载地址:hideShowPassword插件

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

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

用法

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

$(‘#password’).showPassword(); // Reveal
$(‘#password’).hidePassword(); // Hide
$(‘#password’).togglePassword(); // Toggle

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

$(‘#password’).hideShowPassword(true); // Reveal
$(‘#password’).hideShowPassword(false); // Hide
$(‘#password’).hideShowPassword(‘toggle’); // Toggle

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

$(‘#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事件:

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

结束语

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

转载请注明:码云笔记 » js jquery多种方法实现input密码输入框的隐藏和显示

喜欢 (0)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址