HTML中如何阻止Chrome弹出地址保存提示？

我有一个类似谷歌自动补全的简易表单，包含一个输入框，选中建议选项后会在后台填充多段表单并提交。但每次提交表单时，Chrome都会弹出是否保存地址的提示。我已经尝试设置autocomplete="off"、autocomplete="new-password"以及autocomplete="do-not-autofill"，但都无效。需要阻止的提示效果见下图：

有效解决方案 #

1. 精准设置地址字段的autocomplete属性 #

Chrome对地址类表单的自动填充逻辑优先级极高，普通禁用属性无效，需给所有地址相关字段设置Chrome无法识别为标准地址的自定义值：

<input type="text" name="address" autocomplete="nope">
<input type="text" name="city" autocomplete="nope">

若为单个触发自动补全的输入框，可设置autocomplete="none"（HTML5标准中明确禁止自动填充的属性值，部分场景比off更有效）。

2. 动态修改属性干扰检测 #

因表单是后台自动填充后提交，可在填充完成、提交前动态修改字段属性，干扰Chrome的保存识别逻辑：

// 填充表单后执行
document.querySelectorAll('input').forEach(input => {
  input.setAttribute('autocomplete', 'nope');
});
// 提交表单
document.querySelector('form').submit();

3. 添加隐藏假字段误导识别 #

Chrome会通过字段名、标签文本识别地址字段，可添加隐藏的假地址字段，让Chrome误识别并忽略真实表单字段：

<input type="text" name="fake-address" autocomplete="nope" style="display: none;">
<input type="text" name="fake-city" autocomplete="nope" style="display: none;">

4. 改用AJAX提交表单 #

放弃传统表单提交，改用AJAX提交数据，Chrome通常不会对AJAX提交的表单弹出保存提示：

// 用Fetch提交表单数据
fetch('/submit-url', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
  body: new URLSearchParams(new FormData(document.querySelector('form')))
});

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