如何通过编程方式禁用Chrome自动填充功能？

我最近刚好踩过这个坑，Chrome的自动填充规则确实一直在迭代，autocomplete="off"早就失效了，那些用autocomplete="blah"这类无效值的偏方也越来越不稳定。分享几个亲测有效的方案，在Chrome 100+的新版本（覆盖OSX和Windows平台）上都能稳定工作：

• 用autocomplete="new-password"替代无效值
  这个属性原本是为密码字段设计的，但Chrome对普通文本输入框也会生效——它不会对“新密码”类型的字段触发自动填充。写法简单直接：

  <input type="text" name="search" autocomplete="new-password">
  

  相比野路子的无效值，这是标准属性的合理利用，兼容性和稳定性强很多。

• 动态修改输入框的name属性
  Chrome的自动填充是基于输入框name属性匹配历史记录的，我们可以在用户聚焦输入框时，把name改成随机唯一值，让Chrome找不到对应的填充项：

  const searchInput = document.getElementById('your-search-input');
  searchInput.addEventListener('focus', () => {
    searchInput.setAttribute('name', `search-${Date.now()}`);
  });
  

  这个方法完全不影响你的联想搜索逻辑，只是打断了Chrome的匹配路径。

• 结合readonly和聚焦事件
  Chrome不会对readonly状态的输入框做自动填充，我们可以初始把输入框设为只读，用户聚焦时再移除只读属性：

  <input type="text" name="search" readonly onfocus="this.removeAttribute('readonly');">
  

  这个方案非常轻量，不需要额外复杂的JS逻辑，而且对用户体验几乎无影响——聚焦后就能正常输入并触发你的联想搜索。

• 添加隐藏的“诱饵”输入框
  在真实搜索输入框的前面，放一个样式隐藏的输入框，让Chrome优先填充这个“诱饵”，从而忽略真实输入框：

  <!-- 诱饵输入框必须放在真实输入框前面 -->
  <input type="text" name="fake-search" style="position: absolute; opacity: 0; height: 0; border: none;">
  <!-- 真实的搜索输入框 -->
  <input type="text" name="search" autocomplete="off">
  

  注意诱饵的name要和真实输入框名称相近，这样Chrome才会把它当成目标填充对象。

关于你提到的Google Maps联想搜索组件被覆盖的问题，确实存在——Chrome的自动填充优先级极高，第三方组件有时候也躲不开。这时候可以尝试给组件的输入框动态设置autocomplete="new-password"，或者结合上面的readonly方法，一般都能解决。

总的来说，没有100%适用于所有场景的“银弹”，但把上面的方法组合起来用，基本能覆盖绝大多数Chrome版本和使用场景，比临时偏方靠谱多了。

内容的提问来源于stack exchange，提问作者HenrikV