如何阻止浏览器为输入字段显示建议（与禁用自动填充不同）

我太懂这种抓狂的感觉了——Chrome的自动填充机制有时候简直油盐不进，哪怕你把autocomplete的各种取值（off、new-password、随机字符串）试了个遍，还是会跳出输入建议，甚至留下挥之不去的浅黄色背景。结合我自己踩过的坑和社区里的有效方案，给你几个能真正解决问题的办法：

1. 用「诱饵输入框」骗Chrome #

Chrome会优先匹配页面里的标准字段（比如username、password），我们可以在真实输入框前面放两个隐藏的诱饵字段，让Chrome去填充它们，真实字段就能逃过一劫：

<!-- 诱饵字段：必须放在真实输入框之前，样式要确保完全不可见 -->
<input type="text" style="position: absolute; opacity: 0; z-index: -1; height: 0; width: 0;" autocomplete="username">
<input type="password" style="position: absolute; opacity: 0; z-index: -1; height: 0; width: 0;" autocomplete="password">

<!-- 你的真实输入框 -->
<input type="text" name="actual-username" autocomplete="off">
<input type="password" name="actual-password" autocomplete="off">

这个方法的核心是让Chrome的自动填充逻辑“找错目标”，亲测对大部分场景都有效。

2. 动态设置随机autocomplete值 #

Chrome是根据字段的autocomplete属性值和name来匹配填充项的，我们可以在页面加载完成后，给输入框设置一个随机的字符串值：

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('input').forEach(input => {
    // 生成一个随机的非标准autocomplete值
    input.setAttribute('autocomplete', 'custom-' + Math.random().toString(36).slice(2));
  });
});

这样Chrome找不到对应的填充规则，自然就不会弹出建议了。

3. 干掉烦人的浅黄色背景 #

如果只是背景颜色的问题，直接用CSS覆盖Chrome的默认样式就行：

/* 覆盖自动填充的背景色 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  /* 用你需要的背景色替换white */
  -webkit-box-shadow: 0 0 0 30px white inset !important;
  /* 文字颜色也可以自定义 */
  -webkit-text-fill-color: #333 !important;
}

这里用内阴影而不是直接设置background-color，是因为Chrome会强制覆盖后者，内阴影的优先级更高。

4. 组合form和input的autocomplete设置 #

确保form标签的autocomplete="off"，同时给input设置一个非标准的取值（比如nope），有时候Chrome会尊重这种“不按常理出牌”的设置：

<form autocomplete="off">
  <input type="email" name="user-email" autocomplete="nope">
  <input type="password" name="user-pass" autocomplete="nope">
</form>

这些方法单独用可能效果有限，但组合起来基本能搞定Chrome的自动填充问题。你可以根据自己的场景调整，比如如果是登录页，诱饵字段的方法效果最好；如果是普通表单，动态设置随机值更简单。

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