为什么 Chrome 自动填充帐户电子邮件的输入元素错误？
Dex*_* CD 5 html google-chrome autofill
我的问题出现在以下 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>
当我未登录该网站时，它会显示邮件/密码元素，并且它们会正确自动填充。我登录后，页面再次加载，但现在元素被隐藏，但由于某种原因，它会使用我的电子邮件地址自动填充搜索元素！
当我使用开发人员工具显示登录元素时，它看起来像这样：
所以它会自动填充隐藏元素（我对此很满意），但由于某种原因没有将我的电子邮件地址放在正确的字段中！如何阻止 Chrome 这样做？
Dex*_* CD 12
此问题是由 Chrome 自动填充行为中的“怪癖”引起的。
不同的网站以不同的方式构造登录元素，因此 Chrome 必须使用一组启发式方法来尝试理解登录表单。不幸的是，这并不总是能正常工作。
Chrome 如何确定凭据字段
这就是 Chrome 查找登录字段的方法：
- 它找到了一个密码元素，现在 Chrome 需要找到随附的用户名元素。
- 为了查找用户名/电子邮件元素，Chrome 浏览器会扫描密码元素上方的一些元素。
- 它选择最接近密码字段的“交互性”评级最高的元素。
由于电子邮件元素是隐藏的，它的交互性得分比搜索元素更差，因此 Chrome 选择搜索元素。
使固定
该问题的解决方法很简单，您可以通过将这些元素包装在form. 在这种情况下，您只需更换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用户名字段之外查找，因此它总是选择正确的元素。
如今，我总是将属于一起的输入元素放在 a 内部form，即使我实际上没有使用表单做任何事情，而是使用 JavaScript 处理输入。它仍然可以帮助浏览器、插件和屏幕阅读器更好地理解您的网站。
| 归档时间： |
|
| 查看次数： |
2849 次 |
| 最近记录： |