Google Chrome: 禁用管理地址的自动完成菜单

Question

截至 2019 年 12 月 9 日，Chrome v78.x

我在 Web 前端应用程序的某些地方禁用自动完成菜单时遇到了严重的问题。特别是在 Chrome 浏览器上，即使我将 autocomplete="off" 应用于与用户物理地址相关的文本输入，它仍然困扰着我一个带有“管理地址”选项的新型自动完成菜单它在下面。

这里有一些明显的东西：Google Chrome 自动将此类菜单分配给具有占位符（如“街道”和“目的地 ZIP”）的文本输入。

这东西真的很糟糕，因为除非输入元素与 "address-y" 项甚至没有远程关联，否则几乎没有办法将其关闭。

客户明确表示不应该附带自动完成菜单。但是我们不能不使用地址相关的词来显示地址相关的输入。

解决这个问题的方法是什么？

Answer 1

这就是我经过数小时的研究后所做的。它运行良好且易于实施。

确保输入元素的 name 和 id 不包含任何与地址相关的术语。 id="input-street" 和 name="destination-zip" 等属性是大禁忌。
这是最关键的部分：对于输入元素或其任何相邻元素，您需要放置任何人类可读的地址词，在上述术语的字母之间插入“隐形”零宽度连接符 (&zwnj;)。

通过这种方式，您可以欺骗 Chrome 的 AI 功能并绕过其严格的自动完成行为。

一些工作示例：

<input id="input-stret" placeholder="S&zwnj;treet" autocomplete="off">

<form action="/action_page.php">
  <label for="product-addres">Product A&zwnj;ddress</label>
  <input name="addres" id="product-addres" autocomplete="off">
</form>

好了。不再有烦人的地址管理菜单，也没有任何常规的自动完成菜单。

特别感谢@jblopez，他指出空字符有时会在页面上出现损坏。

Answer 2

一个干净的解决方案是将输入字段上的 autocomplete 属性更改为 on 或 off 以外的任何内容（这些是保留的，实际上不会转它关了）。您可以阅读有关解决方案的更多信息

Google Chrome: 禁用管理地址的自动完成菜单

Google Chrome: Disable auto-completion menu for Manage Addresses

html

javascript

google-chrome

autocomplete

street-address