设置autocomplete=off无效时如何禁用input框的浏览器自动填充功能

现代主流浏览器出于用户体验考虑，会主动忽略地址、联系方式等高频字段上设置的autocomplete="off"属性，可通过以下方案解决：

• 方案1：设置非标准的autocomplete属性值
  将autocomplete设置为浏览器无法识别的自定义值，比如nope、disable-autofill等，浏览器遇到未知规则时会自动跳过填充逻辑，该方案兼容性最佳，改后代码如下：

<input type="text" id="customerAddress" name="customerAddress" placeholder="Adresse (Vorschlag übernehmen)" autocomplete="nope">

• 方案2：临时添加只读属性
  给输入框默认加上readonly属性，页面加载完成后再通过JS移除该属性，浏览器不会为只读输入框触发自动填充：

<input type="text" id="customerAddress" name="customerAddress" placeholder="Adresse (Vorschlag übernehmen)" autocomplete="off" readonly>
<script>
window.addEventListener('load', () => {
  setTimeout(() => document.getElementById('customerAddress').removeAttribute('readonly'), 100)
})
</script>

• 方案3：添加占位隐藏输入框
  在表单最开头插入两个隐藏的空输入框，占住浏览器默认的自动填充位，避免填充到真实的地址输入框中：

<!-- 放在表单头部，隐藏不展示 -->
<input type="text" style="display: none;" autocomplete="false">
<input type="hidden" autocomplete="false">

<!-- 真实地址输入框 -->
<input type="text" id="customerAddress" name="customerAddress" placeholder="Adresse (Vorschlag übernehmen)" autocomplete="off">

• 方案4：修改字段标识
  避免id、name属性使用address、street这类浏览器容易识别为地址字段的关键词，降低被自动填充规则命中的概率。

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