Tian密码可见性切换(显示和隐藏)效果,大家估计都见过,所以就不多说了。
默认情况下,输入的密码的 input 标签 type="password"
,默认密码用小点或星号表示。要密码可见所以我们需要将type
修改为"text"
。在 Chrome、FireFox 等浏览器中通过修改 input 标签的 type
属性轻松实现该效果,但是 IE 下就会报错。如果你需要兼容IE,就必须考虑其他方案。
这里提供一个替换整个 input 标签方案,demo和代码见 https://www.7psus5.com/demo/show-password/ ,这里不再解释说明。
这里有几点需要说明的是:
- 示例使用了替换整个 input 标签方案,所以可以兼容IE
- 眼睛的图表使用了 iconfont ,这样使用CSS切换比较简单。
- 在 IE10 +浏览器中,遇到密码输入框的时候,框内会自行显示一个小眼睛的图标,点击后也能显示密码,如果是普通文本输入框,则IE10会自动显示一个小叉,点击后可以清空文本框已输入的内容,如果不想要IE10自带的这两个功能生效,可以在CSS里加入:
input::-ms-clear {display:none;} input::-ms-reveal {display:none;}
这两个针对IE浏览器的CSS定义便可去掉IE浏览器自动显示的文本清除和显示密码的功能…
最新评论
写的挺好的
有没有兴趣翻译 impatient js? https://exploringjs.com/impatient-js/index.html
Flexbox playground is so great!
感谢总结。
awesome!
这个好像很早就看到类似的文章了
比其他的教程好太多了
柯理化讲的好模糊…没懂