自动填充填充错误的字段

Question

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

Answer 1

我遇到了类似的问题，"company" 字段位于 "name" 字段下方。该公司字段自动填充了出生年份。它来自同一站点上的另一个表单，该表单在 "name" 字段正下方显示 "birthdate" 字段组。因此 chrome 以该顺序存储其自动填充值。我最终更改了我的第二个表单字段顺序（很遗憾，这是我能做的最好的）。

Answer 2

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

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

Answer 3

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

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

如果仍然无效，您可以考虑关闭该特定字段的自动填充*:

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

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

Answer 4

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

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

exhaustive list of autocomplete/autofill tags for html form inputs

Answer 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

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

Answer 6

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

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

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

您只是提供了另一个字段供浏览器填充，并且通过将其隐藏在其他字段下几乎无法看到。

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

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

Answer 7

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

Answer 8

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

Answer 9

我遇到了问题，chrome 会在我的一个表单的所有字段中填写我的电子邮件。另一种形式工作正常。我发现问题是 Name 这个词必须在名称输入之前。或者 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>

Answer 10

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

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

现在将 wrongAutocompleteField3 显示为 none:

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

在页面加载时删除它。d-none class:

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

Answer 11

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

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

Answer 12

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

仍然很老套，但它在 Chrome 和 MS Edge 88.0.7.

中对我有用

相关（重复？）问题：
Autocomplete Off is completely Ignored
Disabling Chrome Autofill

Answer 13

在Chrome中，在页面顶部添加：

<input id="" class="" name="" type="password" style="display: none;">

Answer 14

您需要添加表单标签

<form action="#" method="GET">
    <input type="text" name="text"/>
</form>

自动填充填充错误的字段

Autofill populating wrong fields

forms

autofill

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