Chrome设置autocomplete="OFF"后仍自动填充输入框的问题

为什么Chrome会持续自动填充你的搜索框？ #

• Chrome的自动填充机制早已不再严格遵守autocomplete="off"设置。当浏览器通过字段的上下文语义（比如form的role="search"、输入框placeholder含"search"关键词、页面结构）判定这是用户可能需要填充的字段时，会直接忽略autocomplete="off"。
• 你修改ID后暂时生效，是因为Chrome的识别模型需要时间重新关联字段的语义信息；10-12天后，模型完成学习，再次将该输入框判定为搜索类字段，因此恢复自动填充。
• 即使在form和输入框层面都设置了autocomplete="off"，Chrome的机器学习算法仍会基于页面整体信息自主触发填充逻辑。

可靠阻止自动填充的解决方案 #

1. 使用Chrome认可的autocomplete="none"属性 #

Chrome明确支持autocomplete="none"值，用于告知浏览器不对该字段进行任何自动填充或建议。同时保持form标签的autocomplete="off"设置，双重保障：

<form role="search" class="search" data-toggle="collapse" autocomplete="off">
    <input id="smHRtsearcHR" autocomplete="none" type="search" placeholder="smHRt searcHR..." class="form-control global-searchbox">
    <a href="#"><i class="fas fa-search"></i></a>
</form>

这里把输入框type改为search，让浏览器更明确字段的语义类型，配合autocomplete="none"能大幅降低误填充概率。

2. 隐藏假输入框拦截填充 #

如果上述方法仍无效，可以在真实输入框前添加一个隐藏的假输入框，利用Chrome优先填充第一个匹配语义字段的逻辑，让假字段“吸收”自动填充内容：

<form role="search" class="search" data-toggle="collapse" autocomplete="off">
    <!-- 隐藏假输入框，用于拦截Chrome自动填充 -->
    <input type="text" autocomplete="off" style="position: absolute; left: -9999px;">
    <input id="smHRtsearcHR" autocomplete="none" type="search" placeholder="smHRt searcHR..." class="form-control global-searchbox">
    <a href="#"><i class="fas fa-search"></i></a>
</form>

这个方法长期稳定有效，不会因为Chrome的模型更新失效。

3. 利用readonly属性规避填充 #

Chrome不会对readonly字段进行自动填充，我们可以在页面加载时给输入框添加readonly，加载完成后再通过JS移除该属性：

<form role="search" class="search" data-toggle="collapse" autocomplete="off">
    <input id="smHRtsearcHR" autocomplete="none" type="search" readonly placeholder="smHRt searcHR..." class="form-control global-searchbox">
    <a href="#"><i class="fas fa-search"></i></a>
</form>

对应的JS代码：

window.addEventListener('load', () => {
    document.getElementById('smHRtsearcHR').removeAttribute('readonly');
});

这种方式既不影响用户正常输入，又能彻底阻止Chrome的自动填充行为。

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