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

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

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

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

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


当前回答

在Chromium 53.0.2785.92(64位)上,以下工作

<div style="visibility:hidden">
    <input type="text" name="fake_username_remembered">
    <input type="password" name="fake_password_remembered">
</div>

显示:none不工作

其他回答

我最终通过在输入字段中放入一个不重复的变量来解决这个问题-我使用php time()像这样:

<input type="text" name="town['.time().']" >

这主要是对机器人的干扰。我在服务器端所做的就是在输入名称上做一个foreach循环-问题是如果chrome识别名称属性,它将自动填充。

其他的都对我没用。

1月20日chrome更新

上面的解决方案都不起作用,包括添加假字段或设置autocomplete=new-password。是的,这些chrome浏览器不会自动完成,但当你输入密码字段时,它会再次建议密码。

我发现,如果你删除密码字段,然后添加它再次没有id,然后chrome不会自动填充它,也不建议输入密码。

使用类来获取密码值而不是id。

对于firefox来说,仍然需要添加一个虚拟元素。

这个解决方案还允许/禁止基于标志的自动补全:

html:

<!-- form is initially hidden, password field has a dummy id and a class 'id' -->
<form id="loginForm" style="display:none;">
   <span>email:</span><input type="text" placeholder="Email" id="loginEmailInputID"/>
   <span>Password:</span><input class="loginPasswordInput" type="password" placeholder="Password" id="justForAutocomplete"/>
</form>

页面加载:

function hideAutoComplete(formId) {
    let passwordElem=$('#'+formId+' input:password'), prev=passwordElem.prev();
    passwordElem.remove();
    prev.after($('<input type="password" style="display:none">'), passwordElem.clone().val('').removeAttr('id'));
}

if (!allowAutoComplete) hideAutoComplete('loginForm');
$('#loginForm').show();

当你需要密码时:

$('.loginPasswordInput').val();

我刚刚发现,如果你记住了一个网站的用户名和密码,当前版本的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 "

Mike Nelsons提供的解决方案在Chrome 50.0.2661.102 m中不工作。 简单地添加一个与display:none设置相同类型的输入元素不再禁用本机浏览器自动完成功能。现在需要复制希望禁用自动完成的输入字段的name属性。

此外,为了避免输入字段在表单元素中重复,应该在不显示的元素上放置一个disabled。这将阻止该元素作为表单操作的一部分提交。

<input name="dpart" disabled="disabled" type="password" style="display:none;">
<input name="dpart" type="password">
<input type="submit">

在Chromium 53.0.2785.92(64位)上,以下工作

<div style="visibility:hidden">
    <input type="text" name="fake_username_remembered">
    <input type="password" name="fake_password_remembered">
</div>

显示:none不工作