为什么 Chrome 在错误的输入元素中自动填充帐户电子邮件?

问题描述 投票:0回答:2
html google-chrome autofill
2个回答
13
投票

此问题是由 Chrome 自动填充行为中的“怪癖”引起的。

不同的网站以不同的方式构建其登录元素,因此 Chrome 必须使用一组启发式方法来尝试理解登录表单。不幸的是,这并不总是能正常工作。

Chrome 如何确定凭据字段

这就是 Chrome 查找登录字段的方法:

  1. 它找到了一个密码元素,现在 Chrome 需要找到随附的用户名元素。
  2. 为了查找用户名/电子邮件元素,Chrome 会扫描密码元素上方的一些元素。
  3. 它选择最接近密码字段的“交互性”评级最高的元素。

由于电子邮件元素被隐藏,它的交互性得分比搜索元素更差,因此 Chrome 选择搜索元素。

修复

问题的解决方法很简单,您可以通过将这些元素包装在

form
中来限制 Chrome 将哪些元素视为用户名。在这种情况下,您只需更换
div
即可。

<!doctype html>

Search: <input type="search">

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

Chrome 不会在

form
之外查找用户名字段,因此它始终会选择正确的元素。

现在,我总是将属于一起的输入元素放在

form
中,即使我实际上没有使用表单做任何事情,而是使用 JavaScript 处理输入。它仍然可以帮助浏览器、插件和屏幕阅读器更好地理解您的网站。


0
投票

我的表单字段的顺序如下: 姓名 姓 电子邮件 电话号码 密码

Chrome 和 Edge 将密码前面的字段视为用户名,并且他们将电子邮件数据填充到我的“电话号码”字段中。

所以我把它改为 姓名 姓 电话号码 电子邮件 密码

现在已经修复了

© www.soinside.com 2019 - 2024. All rights reserved.