logo标签列表

自动填充填写错误的字段

formsautofill
52

我有一个网站，拥有一个一直运作得很好的结账页面。
最近，使用自动填充功能填写信息的任何客户，他的电子邮件地址都会被放入公司栏位。 我们没有进行任何可能影响到此问题的更改。 还可以使用哪些工具来找到这个问题的根源？

2
浏览器肯定发生了某些变化，以至于它认为你的公司字段可能是一个电子邮件地址... 这里可能有一些有用的信息：https://dev59.com/pWw05IYBdhLWcg3weBru#9795126 - Levesque
@Levesque，我们网站的代码没有变化，这就是为什么我正在尝试弄清楚最近的Chrome版本是否改变了它与自动填充相关的方式。 - Haim
@Levesque，有一些更改，但我已经全部撤销了，但这并没有改变任何事情。 - Haim
我仍然不知道是什么导致了这个问题，但对于任何看到这个的人，我们最终隐藏了该字段，以便自动填充不会将其填充 - 在焦点上，它变为活动状态，用户可以手动填写。 - Haim
你的公司的字段是否位于密码字段上方？我有一个类似的问题，我怀疑Chrome认为位于密码字段上方的字段是用户名/电子邮件字段。 - Boulzy
截至2020年1月，Chrome 79似乎至少搜索label和name属性来确定是否自动填充它们。 - Cato Minor
14个回答
30

楼主的问题可能已经解决了（或者在最近的更新中可能会再次出现！），但是截至2019年初，您可以通过在chrome://flags中设置show-autofill-type-predictions标志，然后重新启动Chrome并查看问题输入字段的标题（工具提示文本）来诊断其中一些问题。它将告诉您用于猜测字段“类型”的信息以及应该用于填充它的保存数据的类型。

3
这在2022年中期仍然是相关的。 - Jouni Kananen
20

我们仍然不知道是什么原因导致了这个问题，但对于任何看到这个问题的人，我们最终将该字段设置为readonly，以便自动填充不会填写它。然后，我们编写了一些JS代码，在焦点聚焦时，它变为活动状态，用户可以手动填写。

<input type="text" name="company" readonly="" onfocus="this.removeAttribute('readonly');">

2
当只读字段被点击时，自动填充选项会显示出来。对我来说，这不是正确的解决方案。 - jacop41
我在React-native的Android上也遇到了这个问题。有人解决了这个问题吗？ - Trần Hạnh
1
请注意：我们尝试通过这种方式解决问题，但是我们的安全团队因在密码字段上调用函数（.removeAttribute()）而标记了readonly/removeAttribute。 - Collin
14
我有一个输入元素，name 和 id 属性都是 "company"，但某些客户的自动填充却是他们的出生年份。我们花了一段时间才意识到发生了什么。 - Brian Leishman
3
实际上，我觉得这个链接更有帮助：https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill#an_example_of_a_payment_form。 - avs099
这是正确的答案。这也演示了如何使用“自动完成”属性。 - Jeff Wilkerson
1
从MDN https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values获取`autocomplete`的全面细节和更新属性值的完整列表。 - ThilankaD
6

我遇到了一个类似的问题，即在“姓名”字段下放置了一个“公司”字段。该公司字段自动填充了出生年份。 它来自同一网站上显示在“姓名”字段下方的“出生日期”字段组的另一个表单。因此，Chrome按照这个顺序存储它的自动填充值。 最终，我只能改变第二个表单字段的顺序（可惜这是我所能做的最好的）。

我有类似的经历。看起来Chrome有时会期望表单字段按特定顺序排列。解决方法是定义一个autocomplete属性，以强制Chrome正确地自动填充，如@catalint所述。请参见https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-autocomplete-name%20exhaustive%20list%20of%20autocomplete/autofill%20tags%20for%20html%20form%20inputs。 - Jeff Wilkerson
4

您需要在输入标签中添加名称。浏览器使用名称来识别应该放入字段的信息。您也可以使用相同的名称作为ID和占位符。 请尝试以下内容：

<input type="text" name="company" id="company" placeholder="company">

如果仍然无法解决问题，您可以考虑针对该特定字段禁用自动填充*：
<input type="text" name="company" id="company" placeholder="company" autocomplete="off">

你也可以使用相同的自动完成属性和 off 值来关闭整个表单的自动填充功能。

autocomplete="off" won't work in the modern browsers since now they override this behavior. try setting some misc text with autocomplete attribute like autocomplete="nahnah" - ThilankaD
3
我们最近在使用Chrome浏览器查看购物车页面时出现了这样的问题，当您保存了网站的用户名和密码时，Chrome会将用户名的值不可思议地放入数量框中。 经过多次尝试，我们发现页面上存在一个隐藏的用户名和密码字段。当这些控件可见时，它们可以自动填充正确的值。但当它们被隐藏后，Chrome将自动填充数量输入框。通过在这些控件上设置autocomplete="username"和autocomplete="current-password"，该问题得以解决。
很不幸，但这是我在 MS Edge 88 中找到的唯一解决方案。谢谢！ - Michael Schober
2
我通过确保我要添加的部分实际上被包含在<form>标签中来解决了这个问题。由于页面和全局“搜索”字段都没有<form>标签，因此全局“搜索”字段被认为是页面表单的一部分。
由于您可以在表单之外拥有输入，而对于单页应用程序来说这并不是一个大问题（虽然可能不是最佳实践！），因此检查这一点可能是值得的。
我也遇到了完全相同的问题。很棒的洞察力，如果发生这种情况，就要切断一个表单与另一个表单的联系。 - moto
2

几乎看不见的输入代理技巧

我也遇到了Chrome 72的同样问题...只要它不是只读的（完全不考虑名称、自动完成等属性），就会填充任何类型的字段（选择或输入）并使用其之前存储的任何类型的值。

  • 您可能希望避免填充字段，因为您正在侦听更改事件或输入验证可能会触发错误消息，仅因为自动填充不良。
  • 您只想舍弃自动填充值，甚至在JavaScript执行之前都不显示它。

您只需提供另一个字段供浏览器填充，并将其隐藏在其他字段下面，使其几乎无法看到。

    <input type="text" id="autofill-if-you-dare" style="position: absolute; z-index: -1; top: 20px; width: 0; height:0" />

注意：您仍然可以在之后使用JavaScript隐藏或删除它，但是在自动填充完成之前不应该隐藏它，因为Chrome只会填充可见字段。正如其他答案所述，它不会触发任何事件，因此您必须依靠轮询来完成。

最初的回答：您可以在JavaScript之后仍然隐藏或删除它，但是在自动填充完成之前不应该隐藏它，因为Chrome只会填充可见字段。并且，正如其他答案所述，它不会触发任何事件，因此您必须依靠轮询来完成。

谢谢，这个hacky的解决方案对我很有用，直到Chrome自己修复这个问题。用户们真的对这个问题感到很烦恼，在Angular应用程序中，我不得不在主[顶级]组件的底部添加这一行。 - vishal-mote
1
在Chrome中，在页面顶部添加以下内容：
<input id="" class="" name="" type="password" style="display: none;">
1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接