前端开发 大前端 W3Cbest

一个专注 WEB 开发的技术博客

0%

利用JavaScript实现密码可见性切换(显示和隐藏)

对于密码的可见性切换经常会在移动端见到,由于移动端输入体验不是很好,经常会输入密码的时候出现错误,反正我是有这样的体验,所以衍生出了密码的显示和隐藏的切换,那么在pc端会出现这种问题吗?答案是会的,特别是在重置密码的时候要输入两次,就会出现输入错误的问题,我是程序员我的解决方法是查看源码。把input的type类型的password改变成text或置空,就显示密码了,这是我经常使用的惯例,所以你在使用浏览器的时候千万不要让浏览器记住密码,很危险的。

那么我们的用户是否也可以看到密码呢,答案是有的,实现原理就是通过js将input 标签 type=”password”改变为type=”text”,在 Chrome、FireFox 等浏览器中通过修改 input 标签的 type 属性轻松实现该效果,但是 IE 下就会报错。如果你需要兼容IE,就必须考虑其他方案。下面看例子:

例子一:用复选框作为介质来切换显示隐藏

最常见的实现是位于密码输入框下的复选框和标签。切换复选框后,密码变为可见。

对于上面提到的安全问题,我已经在密码输入上禁用了自动完成功能。交互非常简单,JavaScript将监听复选框输入的更改。切换后,密码字段将从type属性更改password为text。

在功能方面,这种实现很好。但是有个问题是,“显示密码”复选框文本乍一看就像登录表单更常见的“记住我”选项,不可取。

例子二:用一个按钮实现

实现密码可见性切换的另一种方法是在密码字段本身上设置一个按钮。你也可以用图标来表示。

实现与复选框示例没有太大差别,主要区别在于文本根据密码字段的状态而变化。

我更喜欢这种方法的原因是因为像按钮的作用,至少它看起来不像是“记住我”复选框,它仍然有相同的安全问题。

坚持技术创作分享,您的支持将鼓励我继续创作!