Chrome浏览器表单自动填充问题解决方案

stackoverflow: chrome-ignores-autocomplete-off

该问题是关于Chrome浏览器自动填充的功能，Chrome团队对此给出了他们的立场-bugs.chromium.org/p/chromium/…

简单来说，有两种情况——

【案例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来切换输入类型。

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

参考链接：

@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="password" type="text">

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

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

关于关闭自动补全的详细 MDN 文档- developer.mozilla.org/zh-CN/docs/… ↩︎

👉 最后，这里有一个Demo可供参考：stackblitz.com/edit/js-ap3… 👈（点击链接试一下吧）

浏览器表单自动填充问题【兼容性解决方案】

Chrome浏览器表单自动填充问题解决方案