我遇到了chrome自动填充行为的几个形式的问题。

表单中的字段都有非常常见和准确的名称,例如“email”、“name”或“password”,并且它们还设置了autocomplete=“off”。

自动完成标志已经成功禁用了自动完成行为,当你开始输入时,会出现一个下拉的值,但没有改变Chrome自动填充字段的值。

这种行为是可以的,除了chrome填充输入不正确,例如填充电话输入与电子邮件地址。客户抱怨过这个问题,所以它被证实在很多情况下都发生了,而不是我在我的机器上本地操作的某种结果。

目前我能想到的唯一解决方案是动态生成自定义输入名称,然后在后端提取值,但这似乎是一种相当笨拙的解决这个问题的方法。是否有任何标签或怪癖,改变自动填充行为,可以用来解决这个问题?


当前回答

除了autocomplete="off"外,还必须将值设置为空(value="")才能使其工作。

其他回答

这里有一个肮脏的hack -

你的元素在这里(添加了disabled属性):

<input type="text" name="test" id="test" disabled="disabled" />

然后在你的网页底部放一些JavaScript:

<script>
    setTimeout(function(){
        document.getElementById('test').removeAttribute("disabled");
        },100);
</script>

有时即使autocomplete=off也不能防止在错误的字段中填写凭据。

一个解决方法是禁用浏览器自动填充使用只读模式,并设置可写焦点:

 <input type="password" readonly onfocus="this.removeAttribute('readonly');"/>

焦点事件发生在鼠标单击和通过字段的选项卡时。

更新:

Mobile Safari在字段中设置光标,但不显示虚拟键盘。这个新的解决方案像以前一样工作,但处理虚拟键盘:

<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
    this.removeAttribute('readonly');
    // fix for mobile safari to show virtual keyboard
    this.blur();    this.focus();  }" />

现场演示https://jsfiddle.net/danielsuess/n0scguv6/

/ / UpdateEnd

解释:浏览器自动填充凭据错误的文本字段?

错误地填充输入,例如用电子邮件地址填充电话输入

有时我在Chrome和Safari浏览器上注意到这种奇怪的行为,当密码字段以相同的形式出现时。我猜,浏览器会寻找一个密码字段来插入您保存的凭证。然后它自动将用户名填充到最近的textlike输入字段,在DOM中出现在密码字段之前(只是由于观察而猜测)。由于浏览器是最后一个实例,你无法控制它,

上面的这个即时修复对我来说是有效的。

在chrome浏览器中,如果你用标签包围一个输入,在标签内加上街道、地址或两者都写上,它会忽略任何试图禁用自动填充的尝试。

<label for="searchAddress" class="control-label"> Street Address <input type="text" class="form-control" name="searchAddress></label>

Chrome通过检测标签中的关键字来判断输入类型。它可能对其他关键字也是如此。

我刚刚发现,如果你记住了一个网站的用户名和密码,当前版本的Chrome会自动填充你的用户名/电子邮件地址到任何type=password字段之前。它并不关心字段被称为什么-只是假设password之前的字段将是您的用户名。

旧的解决方案

只要使用<form autocomplete="off">,它就可以防止密码预填充以及基于浏览器可能做出的任何类型的启发式填充字段(这通常是错误的)。而不是使用<input autocomplete="off">,这似乎被密码自动填充忽略了(在Chrome中,Firefox确实遵守它)。

更新的解决方案

Chrome现在忽略<form autocomplete="off">。因此,我最初的解决方案(我已经删除了)现在非常流行。

简单地创建两个字段,并使用“display:none”隐藏它们。例子:

<!-- fake fields are a workaround for chrome autofill getting the wrong fields -->
<input style="display: none" type="text" name="fakeusernameremembered" />
<input style="display: none" type="password" name="fakepasswordremembered" />

然后把你真正的领域放在下面。

记得添加评论,否则你团队中的其他人会想知道你在做什么!

2016年3月更新

刚刚测试了最新的Chrome -一切都很好。这是一个相当古老的答案,但我想说的是,我们的团队已经在几十个项目中使用它很多年了。尽管下面有一些评论,但它仍然很好用。可访问性没有问题,因为字段是显示的:无意味着它们不会得到焦点。正如我提到的,你需要把它们放在你真正的领域之前。

如果使用javascript修改表单,还需要一个额外的技巧。在操作表单时显示假字段,然后在一毫秒后再次隐藏它们。

使用jQuery的示例代码(假设你给你的假字段一个类):

$(".fake-autofill-fields").show();
// some DOM manipulation/ajax here
window.setTimeout(function () {
  $(".fake-autofill-fields").hide();
}, 1);

2018年7月更新

我的解决方案不再那么有效,因为Chrome的反可用性专家已经在努力工作。但他们给了我们一点好处:

<input type="password" name="whatever" autocomplete="new-password" />

这很有效,基本上解决了问题。

但是,当您没有密码字段而只有电子邮件地址时,它将不起作用。这也很难让它停止变黄和预填充。可以使用假字段解决方案来修复这个问题。

事实上,有时您需要放入两个假字段,并在不同的地方尝试它们。例如,我已经在我的表格的开头有假字段,但Chrome最近又开始预填充我的“电子邮件”字段-所以我加倍努力,在“电子邮件”字段之前放了更多的假字段,这就解决了问题。删除第一批或第二批字段将还原为不正确的过度自动填充。

更新 Mar 2020

目前尚不清楚这种解决方案是否以及何时仍然有效。它似乎有时仍然有效,但不是一直有效。

在下面的评论中,你会发现一些提示。@anilyeni刚刚添加的一个可能值得更多的研究:

正如我注意到的,autocomplete="off"在Chrome 80上工作,如果<form>中少于三个元素。我不知道它的逻辑是什么,也不知道它的相关文档在哪里。

还有来自@dubrox的这个可能是相关的,尽管我还没有测试过:

非常感谢你的技巧,但请更新答案,如下所示:无;不再工作,但位置:固定;顶部:-100px;左侧:-100px;宽度:5 px;:)

2020年4月更新

chrome的特殊值为这个属性正在做的工作:(在输入上测试-但不是由我) 自动完成= " chrome-off "

试试下面对我有用的jQuery代码。

if ($.browser.webkit) {
    $('input[name="password"]').attr('autocomplete', 'off');
    $('input[name="email"]').attr('autocomplete', 'off');
}