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

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

效果

原理

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

HTML代码

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