为啥 Chrome 会在错误的输入元素中自动填充帐户电子邮件？
Posted
技术标签:
【中文标题】为啥 Chrome 会在错误的输入元素中自动填充帐户电子邮件？【英文标题】：Why is Chrome autofilling account email in wrong input element?为什么 Chrome 会在错误的输入元素中自动填充帐户电子邮件？ 【发布时间】：2021-07-10 01:12:04 【问题描述】：我的问题出现在以下 html 文档中：
<!doctype html>
Search: <input type="search">
<!-- Display is none when logged in -->
<div style="display: none">
Login:<br>
<input type="email">
<input type="password">
</div>
当我没有登录网站时，它会显示邮件/密码元素，并且它们会正确自动填充。登录后，页面再次加载，但现在隐藏了元素，但由于某种原因，它会自动用我的电子邮件地址填充 search 元素！
当我使用开发人员工具显示登录元素时，它看起来像这样：
所以它是自动填充隐藏元素（我可以接受），但由于某种原因，我的电子邮件地址没有放在正确的字段中！如何阻止 Chrome 这样做？
【问题讨论】：
【参考方案1】：此问题是由 Chrome 的自动填充行为中的“怪癖”引起的。
不同的网站以不同的方式构建其登录元素，因此 Chrome 必须使用一组启发式方法来尝试理解登录表单。不幸的是，这并不总是正常工作。
Chrome 如何确定凭据字段
这是 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 会在错误的输入元素中自动填充帐户电子邮件？的主要内容，如果未能解决你的问题，请参考以下文章
为啥在某些 Chrome 条件下 SVG 路径元素的填充属性会填充整个边界框？
为啥 Chrome 会在我的 HTML 顶部添加一个正文，然后给我一个看似虚假的错误消息？