js jquery多种方法实现input密码输入框的隐藏和显示
最近在做项目时,遇到这么一个需求,就是要实现对登录页面的 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'); });
结束语
以上就是今天码云笔记给大家带来的三种实现 input 密码输入框的显示隐藏效果方法,希望对大家有用,也希望大家积极留言探讨。
码云笔记 » js jquery多种方法实现input密码输入框的隐藏和显示