无法阻止Google Chrome自动填充表单字段的技术求助

这问题我之前帮好几个开发者踩过坑，Chrome对地址类字段的自动填充逻辑确实有点“轴”——哪怕你在表单和字段上都设了autocomplete="off"或autocomplete="false"，部分版本的Chrome还是会无视这些设置，硬给你填充内容。给你几个经过实际验证的解决方案，按优先级排序：

• 用Chrome不识别的autocomplete值：Chrome现在对标准的off/false已经不是100%遵守了，反而一些不在它内置填充列表里的自定义值（比如nope、custom-value）更有效。甚至可以用autocomplete="new-password"——虽然这是密码字段的属性，但Chrome会把它判定为“不需要自动填充”的字段。示例代码：

  <input type="text" name="address_line_two" autocomplete="nope">
  

• 动态修改字段属性+清空值：有时候Chrome会在页面加载完成前就完成填充，所以可以在页面完全加载后，用JS强制重置字段的autocomplete属性并清空内容：

  window.addEventListener('load', () => {
    const addrLine2 = document.querySelector('input[name="address_line_two"]');
    if (addrLine2) {
      addrLine2.setAttribute('autocomplete', 'off');
      addrLine2.value = '';
    }
  });
  

• 添加“诱饵”隐藏字段：这是个有点hack但非常管用的方法——在真实字段前面加一个和地址字段同名的隐藏输入框，让Chrome优先填充这个诱饵，真实字段就不会被碰了：

  <!-- 诱饵字段，Chrome会识别为地址补充字段并填充 -->
  <input type="text" name="address-line2" autocomplete="address-line2" style="position: absolute; left: -9999px;">
  <!-- 真实字段，设置为不自动填充 -->
  <input type="text" name="address_line_two" autocomplete="off">
  

  注意诱饵字段的autocomplete值要设为Chrome识别的地址类型（比如address-line2），这样Chrome才会“上钩”。

• 修改字段的name/id：Chrome很大程度上是通过字段的name或id来识别字段类型的，如果你的address_line_two被它判定为地址补充字段，试着把name改成更无关联的名称，比如name="addr_secondary"，再配合autocomplete="off"，能降低被自动填充的概率。

这些方案可以组合使用，比如同时设置autocomplete="nope"加上动态清空的JS，能覆盖更多Chrome版本的场景。

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