密码框切换

密码框切换

为了让用户有更好的交互体验,产品要求用户输入密码时,能通过某种方式让用户查看自己输入的密码,具体效果如下:

mark

对于这个需求,第一反应就是切换 Input 的 type 值,事实证明确实行得通。

1
2
3
const ele = document.querySelector('input');

Object.is(ele.type, 'password') ? ele.type = 'text' : ele.type='password';

尽管我们项目只要求兼容 IE11 和 IE Edge,但处于习惯,还是从 IE8 ~ IE11 都测了遍,结果发现上面的方法在 IE8 中不兼容。后来想了个简单的方法,在 IE8 中通过修改 Input 的 html 内容来实现同样的效果。

1
2
3
// 具体的代码就不展开了,提供下修改 HTML 的思路
html.replace(/type\s*=\s*('|")?password('|")?/ig, 'type="text"');
html.replace(/type\s*=\s*('|")?text('|")?/ig, 'type="password"');

另外,在 IE 中还发现密码框默认情况下会有个查看密码的小眼睛,普通的文本框也会有个 x 号,需要通过样式清除这些默认样式。

mark

1
2
3
4
5
/* 隐藏 IE10+ input 右侧 x 号*/
input::-ms-clear { display:none; }

/* 隐藏 IE10+ input 密码查看按钮, */
input::-ms-reveal { display:none; }

但上面的清除方法只适合 IE10+,对于 IE8、IE9 只能另辟蹊径了。

嗯~,暂时就总结到这吧,洗洗睡。