我遇到了chrome自动填充行为的几个形式的问题。
表单中的字段都有非常常见和准确的名称，例如“email”、“name”或“password”，并且它们还设置了autocomplete=“off”。
自动完成标志已经成功禁用了自动完成行为，当你开始输入时，会出现一个下拉的值，但没有改变Chrome自动填充字段的值。
这种行为是可以的，除了chrome填充输入不正确，例如填充电话输入与电子邮件地址。客户抱怨过这个问题，所以它被证实在很多情况下都发生了，而不是我在我的机器上本地操作的某种结果。
目前我能想到的唯一解决方案是动态生成自定义输入名称，然后在后端提取值，但这似乎是一种相当笨拙的解决这个问题的方法。是否有任何标签或怪癖，改变自动填充行为，可以用来解决这个问题?
当前回答
如果表单是通过javascript生成的，那么通过在输入中添加“display: none;”来隐藏它的方法对我来说就行不通了。
所以我把它们放在视线之外，让它们隐形:
<input style="width:0;height:0;opacity:0;position:absolute;left:-10000px;overflow:hidden;" type="text" name="fakeusernameremembered"/>
<input style="width:0;height:0;opacity:0;position:absolute;left:-10000px;overflow:hidden;" type="password" name="fakepasswordremembered"/>
其他回答
因为display none似乎不再起作用了 添加
<input type="text" name="fakeusernameremembered"/>
<input type="password" name="fakepasswordremembered"/>
在一个div溢出隐藏，最大宽度和最大高度0px
所以它就变成了:
<div style="overflow: hidden; max-width: 0px; max-height: 0px;">
<input type="text" name="fakeusernameremembered"/>
<input type="password" name="fakepasswordremembered"/>
</div>
对我来说很简单
<form autocomplete="off" role="presentation">
做到了。
在多个版本上进行了测试，最后一次尝试是在56.0.2924.87
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();
最新的解决方案是添加autocomplete="new-password"到密码字段，以防止Chrome自动填充它。
然而，正如sibbl所指出的，这并不会阻止Chrome在表单提交完成后要求你保存密码。在Chrome 51.0.2704.106中，我发现你可以通过添加一个不可见的虚拟密码字段来实现这一点，该字段还具有属性autocomplete="new-password"。注意，“display:none”在这种情况下不起作用。在真正的密码字段之前添加如下内容:
<input type="password" autocomplete="new-password"
style="visibility:hidden;height:0;width:1px;position:absolute;left:0;top:0">`
这只适用于当我将宽度设置为非零值时。感谢tibalt和fareed namrouti给出的原始答案。
如果你正在实现一个搜索框特性，试着将type属性设置为search，如下所示:
<input type="search" autocomplete="off" />
这是为我的Chrome v48工作，似乎是合法的标记:
https://www.w3.org/wiki/HTML/Elements/input/search
