为什么Chrome会将账号邮箱自动填充到错误的input元素中

这个问题是Chrome自动填充的匹配逻辑导致的：Chrome在触发自动填充时，会优先匹配页面内可见的、未明确标注用途的输入框，当登录相关输入框被设为display: none时，Chrome部分场景下会跳过隐藏元素，把邮箱凭证填充到位置靠前的搜索输入框中。以下是可直接落地的解决方案：

方案1：明确标注输入框的autocomplete属性（最推荐） #

这是W3C规范中定义的标准解决方案，给每个输入框明确声明用途，Chrome会严格按照属性值匹配填充内容，不会出现错填问题，修改后的代码示例：

<!doctype html>

Search: <input type="search" autocomplete="search">

<!-- Display is none when logged in -->
<div style="display: none">
    Login:<br>
    <input type="email" autocomplete="username email">
    <input type="password" autocomplete="current-password">
</div>

如果完全不想让搜索框被自动填充，也可以把搜索框的autocomplete属性设为off。

方案2：登录状态下禁用/移除隐藏的登录输入框 #

如果用户登录后不需要再展示登录表单，可以直接从DOM中删除登录相关的元素，从根源上避免自动填充匹配；如果需要保留表单后续使用，可以给隐藏的输入框加上disabled属性，禁用状态的输入框不会被Chrome的自动填充逻辑识别：

<div style="display: none">
    Login:<br>
    <input type="email" disabled>
    <input type="password" disabled>
</div>

需要展示登录表单时，再用JS移除disabled属性即可。

方案3：调整DOM结构顺序 #

如果前两种方案不适用，可以把隐藏的登录表单DOM节点放到搜索框之前，就算Chrome识别到隐藏元素，也会优先填充位置更靠前的同类型输入框，不会影响后面的搜索框。

修改完成后可以清空浏览器的自动填充缓存、用无痕模式测试，避免本地旧缓存影响验证结果。

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