【问题标题】：Autofill populating wrong fields自动填充填充错误的字段
【发布时间】：2016-03-30 08:35:11
【问题描述】：

我有一个网站，它的结帐页面一直运行良好。
最近，任何使用自动填充来填写其信息的客户都会将其电子邮件地址转储到公司字段中。我们所做的任何更改都不会影响这一点。我还可以使用哪些其他工具来查明真相？

【问题讨论】：

必须进行某些更改以使浏览器认为您的公司字段可能是电子邮件地址...这里可能会提供一些有用的信息：stackoverflow.com/questions/7223168/…
@Levesque 我们网站的代码没有任何变化，这就是为什么我想弄清楚最近发布的 Chrome 是否改变了它与自动填充相关的方式
@Levesque 有一些变化，但我将它们全部回滚，这并没有改变任何东西。
我仍然不知道是什么导致了这个问题，但是对于看到这个问题的任何人，我们最终隐藏了该字段，以便自动填充不会填充它 - 在焦点上，它变得活跃并且用户可以手动填写
您的公司字段是否位于密码字段的正上方？我或多或少有同样的问题，我怀疑 Chrome 会认为密码字段上方的字段是用户名/电子邮件字段。

【解决方案1】：

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

【讨论】：

我也有过类似的经历。似乎 Chrome 有时会期望表单字段按特定顺序排列。解决方法是定义一个autocomplete 属性以强制Chrome 正确自动填充，就像@catalint 一样。见html.spec.whatwg.org/multipage/…

【解决方案2】：

我们仍然不知道是什么导致了这个问题，但是对于看到这个问题的任何人，我们最终都会填写 readonly 字段，以便自动填充不会填充它。然后我们写了一些 JS，在焦点上，它变得活跃，用户可以手动填写。

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

【讨论】：

单击只读字段时，会显示自动填充选项。这不是正确的解决方案，至少对我而言。
我在 React-native android 上也遇到了这个问题。有人解决了这个问题吗？

【解决方案3】：

您需要在输入标签中添加名称。浏览器使用名称来识别应该进入该字段的信息。如果您愿意，您也可以将其用于 ID 和占位符。试试这个：

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

如果还是不行，您可以考虑关闭该特定字段的自动填充功能*：

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

*您还可以使用相同的自动完成属性和关闭值关闭整个表单的自动填充。

【讨论】：

autocomplete="off" 在现代浏览器中不起作用，因为现在它们会覆盖此行为。尝试设置一些带有自动完成属性的杂项文本，例如autocomplete="nahnah"

【解决方案4】：

发现自己遇到了类似的问题，在这种情况下要使用自动完成属性

<input type="text" name="fooBar" autocomplete="organization" >

exhaustive list of autocomplete/autofill tags for html form inputs

【讨论】：

大声笑我有一个带有name 和id 属性的输入元素都是“公司”，但不知何故，有些客户会自动填写他们的出生年份。我们花了一段时间才意识到发生了什么
我发现这个链接实际上更有帮助：developers.google.com/web/updates/2015/06/…
这是正确答案。这也演示了如何使用autocomplete 属性。
来自 MDN developer.mozilla.org/en-US/docs/Web/HTML/Attributes/…的“自动完成”的全面详细信息和更新属性值的完整列表

【解决方案5】：

我最近一直遇到这个问题，特别是 chrome。看来

autocomplete="off"

Chrome 不再接收。我发现以下来源很有帮助：

Chromium（我相信这是很多 Chrome 所基于的）具有以下代码，显示了在查找字段以填充 Chrome 的自动完成时使用的正则表达式：

https://cs.chromium.org/chromium/src/components/autofill/core/common/autofill_regex_constants.cc?sq=package:chromium&g=0&l=262

我觉得他们唯一发现的其他解决方法是遵循这些约定： https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

或者至少确保您提供的属性与上述列表足够不同，这样它就不会被自动完成功能拾取。

【讨论】：

【解决方案6】：

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

我刚刚在 Chrome 72 上遇到了同样的问题......它只是想填充任何类型的字段（选择或输入），只要它不是只读的（完全不尊重名称、自动完成等属性），它之前可能存储的任何类型的值。

您可能希望避免填充该字段，因为您侦听 change 事件，或者对输入进行了一些验证，这可能会因为自动填充错误而触发错误消息。
您只想丢弃自动填充值，甚至不显示（甚至在 javascript 执行之前）。

您只需提供另一个字段供浏览器填写，然后将其隐藏在另一个字段下几乎不可能看到。

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

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

【讨论】：

感谢它的 hacky 解决方案，但对我有用，直到 chrome 自行修复，用户真的对这个问题感到恼火，在 Angular 应用程序中，我必须在 master 底部添加这一行[顶级]组件。

【解决方案7】：

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

【讨论】：

【解决方案8】：

我们最近从 chrome 中查看我们的购物车页面时开始遇到这样的问题，并且您保存了该网站的用户名和密码。 Chrome 会莫名其妙地将用户名值放入数量框中。经过一番摸索，我们意识到页面上有一个隐藏的用户名和密码字段。这些会在可见时正确自动填充。当隐藏铬会自动填充数量输入框。通过在这些控件上设置 autocomplete="username" 和 autocomplete="current-password"，问题就消失了。

【讨论】：

不幸的是不理想，但这里唯一的解决方案在 MS Edge 88 中对我有用。谢谢！

【解决方案9】：

我遇到的问题是 chrome 会在我的一个表单的所有字段中填写我的电子邮件。另一种形式正常工作。我发现问题是名称必须在名称输入之前。或者 email 这个词必须在 email 输入之前。后来我有了。在电子邮件输入工作后也使用<label for="email">Your email</label>。

**Incorrect autocomplete:**
<input type="text" name="name"/> Your name
<input type="email" name="email"/> Your email

**Correct autocomplete:**
Your name <input type="text" name="name"/>
Your email <input type="email" name="email"/>
or
<label for="name">Your name</label> <input type="text" name="name"/>
<label for="email">Your email</label> <input type="email" name="email"/>
or
<input type="text" name="name"/> <label for="name">Your name</label>
<input type="email" name="email"/> <label for="email">Your email</label>

【讨论】：

【解决方案10】：

假设有三个字段，一个自动完成错误。

<input type="text" name="field1"/> 
<input type="password" name="field2"/> 
<input type="text" name="wrongAutocompleteField3"/>

现在将 wrongAutocompleteField3 显示为无：

<style>
.d-none{
   display:none;
}
</style>
....
<input type="text" name="wrongAutocompleteField3" class="d-none"/>

在页面加载时删除这个 .d-none 类：

<script>
$(function(){
   $('[name="wrongAutocompleteField3"]').removeClass('d-none');
});
</script>

【讨论】：

为什么会有帮助？

【解决方案11】：

我通过确保我添加的部分实际上包含在<form> 标记中来解决了这个问题。该网站的全局“搜索”字段被视为页面表单的一部分，因为两者都没有<form> 标记。

由于您可以在表单之外进行输入，而这对于单页应用程序来说并不是什么大问题（尽管这可能不是最佳实践！），这可能是值得检查的事情。

【讨论】：

完全一样的事情发生在我身上。伟大的洞察力，如果发生这种情况，将一种形式与另一种形式切断

【解决方案12】：

2021 年 2 月：
autocomplete="__away" 为我工作 src。
autocomplete="new-password" 也为 src 工作。

仍然很老套，但它在 Chrome 和 MS Edge 88.0.7 中都对我有用。

【讨论】：