谷歌浏览器：禁用管理地址的自动完成菜单

Question

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

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

有一点很明显：谷歌浏览器会自动将这种菜单分配给具有“街道”和“目的地 ZIP”等占位符的文本输入。

这东西真是太糟糕了，因为除非输入元素与“address-y”术语甚至没有远程关联，否则实际上无法将其关闭。

客户明确表示不应附加自动完成菜单。但是，如果不使用与地址相关的词，我们就无法显示与地址相关的输入。

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

Answer 1

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

• 确保输入元素的name并且id不包含任何与地址相关的术语。属性喜欢id="input-street"和name="destination-zip"是大禁忌。

• 这是最关键的部分：对于需要放置任何人类可读地址术语的输入元素或其任何相邻元素，请在所述术语的字母之间插入“不可见”零宽度连接符 ( ‌)。

通过这种方式，您可以欺骗 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，他指出空字符有时会出现在页面上。