如何阻止Google自动填充/自动补全破坏表单？常规方案已失效

我之前也碰到过Google自动填充硬刚自定义组件的情况，尤其是邮编这种有格式要求的字段，确实头疼。给你几个亲测有效的方案：

1. 使用Google认可的非标准autocomplete值 #

现在Google对autocomplete="off"和"false"已经不太买账了，但你可以试试用一些它不会识别为邮编的特定值，比如：

<input id="postalCode" placeholder="Postal Code* (A0A 0A0)" autocomplete="nope">

或者用autocomplete="postal-code-no"这类自定义无效值，Google的自动填充逻辑会因为匹配不到对应字段类型，直接忽略这个字段。

2. 添加隐藏的“诱饵”字段 #

这是个很实用的小技巧，在真实邮编字段前加一个隐藏的假邮编字段，让Google自动填充去填这个假字段，你的真实字段就能不受干扰：

<!-- 诱饵字段，通过样式彻底隐藏 -->
<input type="text" name="postalCode" autocomplete="postal-code" style="display: none !important; height: 0; width: 0; opacity: 0; position: absolute; z-index: -1;">
<!-- 真实的自定义字段 -->
<input id="postalCode" placeholder="Postal Code* (A0A 0A0)" autocomplete="off">

注意诱饵字段的name要和真实字段原本的name一致，这样Google会优先识别这个隐藏字段，自动填充的内容就不会跑到你的自定义组件里了。

3. 动态修改字段属性避开自动填充 #

在页面加载完成后，动态设置autocomplete为Google明确不会处理的值，比如new-password，再初始化你的自定义补全逻辑：

document.addEventListener('DOMContentLoaded', function() {
  const postalField = document.getElementById('postalCode');
  // 用new-password让Google跳过自动填充
  postalField.setAttribute('autocomplete', 'new-password');
  // 延迟初始化自定义补全，确保Google自动填充逻辑已经执行完毕
  setTimeout(() => {
    // 这里替换成你的自定义自动补全初始化代码
    initCustomPostalAutocomplete(postalField);
  }, 500);
});

new-password是Google官方明确不会自动填充的字段值，用来避开自动填充逻辑非常有效。

4. 调整字段文本降低识别概率 #

Google会通过占位符、标签文本推断字段类型，你可以稍微修改占位符的表述，比如把Postal Code* (A0A 0A0)改成Enter Postal Code* (A0A 0A0)，或者给字段加一个不含“Postal Code”的隐藏标签：

<label for="postalCode" style="display: none;">Enter Code</label>
<input id="postalCode" placeholder="Enter Postal Code* (A0A 0A0)" autocomplete="off">

这样Google的文本匹配逻辑会因为匹配度降低，跳过这个字段的自动填充。

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