我遇到了chrome自动填充行为的几个形式的问题。
表单中的字段都有非常常见和准确的名称，例如“email”、“name”或“password”，并且它们还设置了autocomplete=“off”。
自动完成标志已经成功禁用了自动完成行为，当你开始输入时，会出现一个下拉的值，但没有改变Chrome自动填充字段的值。
这种行为是可以的，除了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();
其他回答
What I have done it to change the input type="text" to a multi line input ie. overflow-x:hidden; overflow-y:hidden; vertical-align:middle; resize: none; A quick explanation of the code: The overflow-x and -y hidden wil disable the scroll buttons on the right of the textarea box. The vertial algin will align the lable vertical middle with the text area and the resize: none will disable the resize grabber at the bottom right of the textarea. In essance it means that your textarea will appear like a textbox, but with chrome autofill off.
对于Angular用户:
由于autocomplete= 'off'忽略新chrome版本，chrome开发人员建议autocomplete= '假|随机字符串'，所以谷歌chrome/现代浏览器有2种类型的用户助手-
Autocomplete ='off'(防止上次缓存的建议)。 Autocomplete = 'false | random-string'(防止自动填充设置，因为'random-string'是不知道的浏览器)。
那么，在禁用这两个恼人的建议的情况下，该怎么办呢? 诀窍在这里:-
在每个输入字段中添加autocomplete = 'off'。 (或简单的Jquery)。
示例:$("input")。attr(“自动完成”,“关闭”);
从HTML代码中删除<form name='form-name'>标签，并在<div>容器中添加ng-form ='form-name'。 添加ng-form="form-name"也会保留所有的验证。
我的黑客测试在Chrome 48:
由于Chrome试图找出字段的类型，它是通过查看诸如id或名称属性的<输入>，但也在相关的<标签>内容，你只需要找到这些无意义的名字。
对于id和名称，很容易选择这里没有列出的其他内容。
对于标签，我在中间插入了一个不可见的<span>，例如对于一个城市(它会打乱我的位置自动完成):
<span>Ci<span style="display:none">*</span>ty</span>
完整的工作示例:
<!DOCTYPE html> <html> <body> <form method="post" action="/register"> <div> <label for="name">Name</label> <input id="name" type="text" name="name" /> </div> <div> <label for="email">Email</label> <input id="email" type="text" name="email" /> </div> <div> <label for="id1">City</label> <input id="id1" type="text" name="id1" /> <-- STILL ON :( </div> <div> <label for="id2">Ci<span style="display:none">*</span>ty</label> <input id="id2" type="text" name="id2" /> <-- NOW OFF :) </div> </form> </body> </html>
这是我最近使用的解决方案。
$('#email').prop('autocomplete', true);
为用户名字段输入值' '(空格)。
<input type = 'text' value = ' ' name = 'username' />
如果您曾经用用户输入的值填充用户名，如果没有用户输入的值，则编码输入' '。
编辑:我还不得不改变'用户名'字段有一个其他的名字，而不是'用户名'，例如。“nameofuser”
