此问题是由 Chrome 自动填充行为中的“怪癖”引起的。
不同的网站以不同的方式构建其登录元素,因此 Chrome 必须使用一组启发式方法来尝试理解登录表单。不幸的是,这并不总是能正常工作。
这就是 Chrome 查找登录字段的方法:
由于电子邮件元素被隐藏,它的交互性得分比搜索元素更差,因此 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 处理输入。它仍然可以帮助浏览器、插件和屏幕阅读器更好地理解您的网站。
我的表单字段的顺序如下: 姓名 姓 电子邮件 电话号码 密码
Chrome 和 Edge 将密码前面的字段视为用户名,并且他们将电子邮件数据填充到我的“电话号码”字段中。
所以我把它改为 姓名 姓 电话号码 电子邮件 密码
现在已经修复了