Chrome浏览器表单自动填充问题解决方案
stackoverflow: chrome-ignores-autocomplete-off
该问题是关于Chrome浏览器自动填充的功能,Chrome团队对此给出了他们的立场-https://bugs.chromium.org/p/chromium/issues/detail?id=468153#c164
简单来说,有两种情况——
-
【案例1】:你的
input
类型不是password
。在这种情况下,解决方案很简单,分为三个步骤。-
将
name
属性添加到input
-
name
不应以电子邮箱或用户名之类的值开头,否则Chrome任然会显示下拉列表。例如,name="emailToDelete"
显示下拉菜单,但name="to-delete-email"
不显示。同样适用于autocomplete
属性。 -
添加
autocomplete
属性,并添加对你有意义的值,例如,new-field-name
它看起来像这样,在你的余生中你不会再看到这个输入框的自动填充。
<input type="text/number/something-other-than-password" name="x-field-1" autocomplete="new-field-1" />
-
-
【案例2】:
input
的类型是password
- 好吧,这种情况下,无论你进行任何实验,Chrome都会想你显示
管理密码/使用现有密码
的下拉菜单。Firefox也会有类似的现象,所以其他主要浏览器也是如此。1 - 在这种情况下,如果你真的想阻止用户查看
管理密码/使用现有密码
的下拉菜单,你将不得不使用JavaScript来切换输入类型。
- 好吧,这种情况下,无论你进行任何实验,Chrome都会想你显示
针对于type=password
的解决方案,建议使用type=text
来代替
参考链接:
-
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes/autocomplete
-
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input#attr-autocomplete
-
https://stackoverflow.com/questions/2530/how-do-you-disable-browser-autocomplete-on-web-form-field-input-tags?page=2&tab=scoredesc#tab-top
-
https://stackoverflow.com/questions/67602061/webkit-text-security-disc-css-property-is-not-working-in-firefox-browser
@font-face{
font-family: text-security-disc;
src: url("https://raw.githubusercontent.com/noppa/text-security/master/dist/text-security-disc.woff");
}
input.password {
font-family: text-security-disc;
-webkit-text-security: disc;
}
<input class="p" type="text">
如果需要将字体文件下载到本地,只需要将URL复制到浏览器地址栏下载,保存到项目目录,然后只需在代码中相对于本地下载的文件更改URL即可。
已验证兼容性:Chrome、Firefox、新版Edge、IE10+
关于关闭自动补全的详细 MDN 文档- https://developer.mozilla.org/zh-CN/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion ↩︎