为什么 Chrome 在错误的输入元素中自动填充帐户电子邮件？
Why is Chrome autofilling account email in wrong input element?
我的问题出现在以下 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>
当我未登录该站点时，它会显示 mail/password 元素，并且它们会正确获得 auto-filled。在我登录后，页面再次加载，但现在隐藏了元素，但由于某种原因，然后 auto-fills search 元素和我的电子邮件地址！
当我使用开发人员工具显示登录元素时，它看起来像这样：
所以它是 auto-filling 隐藏元素（我同意），但出于某种原因没有将我的电子邮件地址放在正确的字段中！我怎样才能阻止 Chrome 这样做？
此问题是由 Chrome 的自动填充行为中的 'quirk' 引起的。
不同的网站以不同的方式构建其登录元素，因此 Chrome 必须使用一组试探法来尝试理解登录表单。不幸的是，这并不总是能正常工作。
Chrome 如何确定凭据字段
这就是 Chrome 查找登录字段的方法：
- 它找到了密码元素，现在 Chrome 需要找到伴随的用户名元素。
- 要找到 username/email 元素，Chrome 扫描密码元素上方的一些元素。
- 它选择最接近密码字段的 'interactability' 评级最高的元素。
由于电子邮件元素是隐藏的，因此其交互性得分低于搜索元素，因此 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 处理输入。它仍然有助于浏览器、插件和屏幕阅读器更好地理解您的网站。
我的问题出现在以下 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>
当我未登录该站点时，它会显示 mail/password 元素，并且它们会正确获得 auto-filled。在我登录后，页面再次加载，但现在隐藏了元素，但由于某种原因，然后 auto-fills search 元素和我的电子邮件地址！
当我使用开发人员工具显示登录元素时，它看起来像这样：
所以它是 auto-filling 隐藏元素（我同意），但出于某种原因没有将我的电子邮件地址放在正确的字段中！我怎样才能阻止 Chrome 这样做？
此问题是由 Chrome 的自动填充行为中的 'quirk' 引起的。
不同的网站以不同的方式构建其登录元素，因此 Chrome 必须使用一组试探法来尝试理解登录表单。不幸的是，这并不总是能正常工作。
Chrome 如何确定凭据字段
这就是 Chrome 查找登录字段的方法：
- 它找到了密码元素，现在 Chrome 需要找到伴随的用户名元素。
- 要找到 username/email 元素，Chrome 扫描密码元素上方的一些元素。
- 它选择最接近密码字段的 'interactability' 评级最高的元素。
由于电子邮件元素是隐藏的，因此其交互性得分低于搜索元素，因此 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 处理输入。它仍然有助于浏览器、插件和屏幕阅读器更好地理解您的网站。