浏览器表单自动填充问题

作者：xl
链接：https://juejin.cn/post/7111628488041299982
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

在edge或者chrome浏览器的时候，当你想要填一个input password的框时，浏览器会自动提示你它保存过的密码啥的，也就是出现下拉框，点击一下就自动填充了，类似于下面这样：

该问题是关于Chrome浏览器自动填充的功能，Chrome团队对此给出了他们的立场： https://issues.chromium.org/issues/41163264#comment165

可以暂时总结如下规律：

除此之外，还可能出现保存的数据这一下拉框，其中可能时根据在其他网站的type，id,name保存过的数据。

如何去除呢？

可以添加autocomplete属性，并添加对你有意义的值：

它看起来像这样，在你的余生中你不会再看到这个输入框的自动填充，适用于以上那几种情况,除了password。

怎么去除password的提示呢？这种情况下，无论你进行任何实验，Chrome都会想你显示管理密码/使用现有密码的下拉菜单。Firefox也会有类似的现象，所以其他主要浏览器也是如此。

在这种情况下，如果你真的想阻止用户查看管理密码/使用现有密码的下拉菜单，你将不得不使用JavaScript来切换输入类型。

针对于type=password的解决方案,建议使用type=text来代替。

如果效果不对可能是字体文件下载失败了

如果需要将字体文件下载到本地，只需要将URL复制到浏览器地址栏下载，保存到项目目录，然后只需在代码中相对于本地下载的文件更改URL即可。

已验证兼容性：Chrome、Firefox、新版Edge、IE10+

本博客所有文章均为原创内容，版权归原作者所有。未经作者允许，禁止转载、摘编、复制或建立镜像。

如需转载，请通过以下方式联系作者：