码云前端开发 2018-06-19

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

文章目录隐藏

方法一：javascript 实现
方法二：jquery 实现
方法三：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 class="bi_input" autocomplete="off" name="key" type="password" value="mybj123.com" /></div>
</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 id="pass" class="pass" name="" type="password" value="123456" />
<input id="btn" name="" type="button" 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');
});