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

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

在web前端应用程序的某些位置禁用自动完成菜单时，我遇到了严重的问题。特别是在Chrome浏览器上，即使我将

autocomplete=“off”

应用于与用户物理地址相关的文本输入，它仍然使用一种新型的自动完成菜单，在其下方带有“Manage addresses”选项，这让我感到很不舒服

有一点很明显：Google Chrome会自动将这类菜单分配给具有占位符（如“Street”和“Destination ZIP”）的文本输入

这件事真的很糟糕，因为除非输入元素与“地址”术语没有任何关联，否则根本无法关闭它

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

---

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

下面是我经过数小时的研究后所做的。它工作得很好，易于实现

• 确保输入元素的

  name

  和

  id

  不包含任何与地址相关的术语。像

  id=“input street”

  和

  name=“destination zip”

  这样的属性都是绝对禁止的

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

  &zwnj；

  ）

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

一些工作示例：

产品A&zwnj；地址

就这样。没有更多烦人的地址管理菜单，也没有任何常规的自动完成菜单

---

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

一个干净的解决方案是在输入字段中使用

自动完成

属性，而不是打开或关闭（这些是保留的，实际上不会关闭）。您可以阅读更多有关该解决方案的信息

我只是浪费了几个小时试图解决这个问题。不幸的是，您的解决方案不适用于占位符属性。我不得不用“市区的名字”来代替“城市”这个词，以防止谷歌Chrome试图autofill@Jamgold如果它不起作用，我会非常惊讶，因为它对我来说就像一个符咒。你能详细描述一下它是如何失效的吗？它是否仍然显示菜单而不考虑更改，或者它是否破坏了您的占位符？我必须在占位符文本中进行一些替换。在Chrome 79中，空字符显示为替换字符。我不得不使用零宽度细木工&zwnj；停止自动完成而不添加替换字符。@jblopez这是一个很好的建议。显然，空字符在我这方面起了作用，我想它与我们正在使用的index.html的不同内容类型/字符集属性有关。我会在我的回答中反映你的见解。如果你在地址输入中添加了自动建议，而chrome显示的是地址建议而不是自动建议框，那就更令人沮丧了。这对我来说效果很好-设置autocomplete=“nope”不知道为什么会这样downvoted@8a9因为浏览器在识别地址或电话输入时会忽略“自动完成”属性。