几乎不可见的输入代理把戏

Question

我有一个网站，结帐页面一直很漂亮。
最近，任何使用自动填充填写他的信息的客户都会将他的电子邮件地址转储到公司字段中。我们所做的任何改变都不会影响到这一点。我还可以使用哪些其他工具来深入了解这一点？

Answer 1

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

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

Answer 2

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

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

exhaustive list of autocomplete/autofill tags for html form inputs

Answer 3

我遇到了类似的问题，有一家＆＃34;公司＆＃34;字段放在＆＃34;名称＆＃34;领域。那个公司的领域是自生的一年。它来自同一网站上的另一个表格，显示了一个＆＃34;生日＆＃34;字段组正好位于＆＃34;名称＆＃34;领域。因此，chrome按此顺序存储其自动填充值。我最终改变了我的第二个表单字段顺序（遗憾的是，这是我能做的最好的事情）。

Answer 4

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

Answer 5

几乎不可见的输入代理把戏

我刚刚遇到了与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只会填充可见字段。而且正如其他答案所指出的那样，它不会触发任何事件，因此您必须依靠轮询来这样做。

Answer 6

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

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

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

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

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

Answer 7

我有一个问题，chrome会在我的一种表单中的所有字段中填写我的电子邮件。另一种形式可以正常工作。我发现问题在于名称一词必须在名称输入之前。或者，电子邮件一词必须在输入电子邮件之前。我后来有。在输入电子邮件后，也使用<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 8

假设存在三个字段，其中一个字段的自动填充错误。

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

现在将错误的AutocompleteField3显示为none：

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

在页面加载时，删除此.d-none类：

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

Answer 9

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

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

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

Answer 10

我最近遇到了这个问题，特别是铬。似乎

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 11

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

Answer 12

我通过确保要添加的部分实际上包裹在<form>标记中解决了此问题。该网站的全局“搜索”字段被认为是页面表单的一部分，因为它们都没有<form>标签。

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

自动填充填充错误的字段

12 个答案:

几乎不可见的输入代理把戏