避坑|input password 框在浏览器会自动填充密码的问题

820 阅读1分钟

网上说的

方法1:autocomplete属性

方法2:失焦、获取焦点的时候切换readonly

方法3:增加额外内容 隐藏域、透明框

以上方法全不好使。。。。

要想彻底解决此问题那就不能用password框,用text框做,使用css属性-webkit-text-security:disc,但是此方法只能解决非webkit内核的浏览器,不兼容火狐。

终极方法(非常好使):引入text-security字体包,隐藏时设置字体:font-family: text-security-disc;

上图:

image.png

image.png

image.png

效果:

image.png

最后:

可能有些姐妹可能会问字体库在哪下载的?说一下我的方案

第一步:npm install text-security

第二步:从node_modules里把字体迁移到本地

image.png

第三步:在从package.json里把依赖包text-security删掉,毕竟没用了嘛。

然后就可以安心使用此字体啦~再也不用担心password框的坑了。