自定义React组件库无法设置name属性后Chrome搜索框被自动填充信用卡信息

问题根因 #

Chrome的自动填充逻辑并非仅依赖name和autocomplete属性，官方文档提到的属性只是标准的适配方案，实际Chrome还会启用启发式识别规则判定输入框类型，规则包含以下维度：

• 输入框的placeholder文本、周边关联的文案内容
• 当前页面内其他表单字段的组合特征
• 对应域名下用户的历史表单填写、自动填充记录

结合你的场景触发误填充的核心原因有两个：

1. 组件库更新后输入框丢失了原本的name="search"属性，这个属性原本可以明确标识输入框为搜索类型，直接排除信用卡填充的匹配逻辑。缺失明确标识后Chrome只能 fallback 到启发式识别。
2. 你当前使用的域名下存在过信用卡填写/填充的历史记录，Chrome将无明确类型标识的搜索输入框误匹配为了信用卡相关字段，这也符合你提到的「新域名下无该问题」的特征。

可行的解决方案 #

即使组件库限制了直接传入name或autocomplete属性，你也可以通过以下方式绕过：

• 在组件渲染完成后，通过DOM操作手动给输入框添加autocomplete="off"或者autocomplete="noprefill"属性，Chrome遇到非标准的autocomplete值时会跳过自动填充逻辑
• 如果允许调整组件上层结构，可以在该搜索输入框前插入一个隐藏的占位输入框，干扰Chrome的启发式匹配规则：

<input type="text" style="display:none" aria-hidden="true">

内容的提问来源于stack exchange，提问作者mykhailo.romaniuk