HTML-为什么Chrome自动填充帐户电子邮件的输入元素不正确？-堆栈溢出

顺晟科技

2022-10-18 12:08:57

我的问题出现在以下HTML文档中：

<代码><；！文档类型HTML>；搜索：<；输入类型="；搜索"；>；<；！--登录时无显示-->；<；DIV style="；显示：无"；>；登录：<；BR>；<；输入类型="；电子邮件<；输入类型="；密码"；>；<；/DIV>；

当我没有登录网站时，它会显示邮件/密码元素，并自动正确填充。在我登录后，页面再次加载，但现在隐藏了元素，但出于某种原因，它会自动用我的电子邮件地址填充搜索元素！

当我使用开发人员工具显示登录元素时，它看起来像这样：

所以它是自动填充隐藏元素（我可以接受），但由于某种原因，它没有将我的电子邮件地址放在正确的字段中！我怎样才能阻止Chrome这样做？

顺晟科技：

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

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

Chrome

如何确定凭据字段

这就是Chrome为查找登录字段所做的工作：

它找到一个密码元素，现在Chrome需要找到附带的用户名元素。
为了找到用户名/电子邮件元素，Chrome会扫描密码元素上方的一些元素。
它选择最接近密码字段的具有最高“交互性”等级的元素。

由于电子邮件元素是隐藏的，它的交互性得分比搜索元素差，所以Chrome选择了搜索元素。

固定

该问题

的修复很简单，您可以通过将这些元素包装在<!doctype html> Search: <input type="search">  <div style="display: none"> Login:<br> <input type="email"> <input type="password"> </div>中来限制Chrome将哪些元素视为用户名。在这种情况下，您可以只替换form。

<代码><；！文档类型HTML>；搜索：<；输入类型="；搜索"；>；<；！--登录时无显示-->；<；表单样式="；显示：无"；>；登录：<；BR>；<；输入类型="；电子邮件<；输入类型="；密码"；>；<；/窗体>；

Chrome不会在<!doctype html> Search: <input type="search">  <div style="display: none"> Login:<br> <input type="email"> <input type="password"> </div>之外查找用户名字段，因此它总是选择正确的元素。

现在，我总是把属于<!doctype html> Search: <input type="search">  <div style="display: none"> Login:<br> <input type="email"> <input type="password"> </div>的输入元素放在一起，即使我实际上并不使用表单做任何事情，而是用JavaScript处理输入。它仍然可以帮助浏览器、插件和屏幕阅读器更好地理解您的站点。

上一篇：HTML-我一半的Google搜索框下一篇：JavaScript-如何将参数值传

网站建设

Html

HTML-为什么Chrome自动填充帐户电子邮件的输入元素不正确？-堆栈溢出

如何确定凭据字段

固定