我遇到了chrome自动填充行为的几个形式的问题。
表单中的字段都有非常常见和准确的名称，例如“email”、“name”或“password”，并且它们还设置了autocomplete=“off”。
自动完成标志已经成功禁用了自动完成行为，当你开始输入时，会出现一个下拉的值，但没有改变Chrome自动填充字段的值。
这种行为是可以的，除了chrome填充输入不正确，例如填充电话输入与电子邮件地址。客户抱怨过这个问题，所以它被证实在很多情况下都发生了，而不是我在我的机器上本地操作的某种结果。
目前我能想到的唯一解决方案是动态生成自定义输入名称，然后在后端提取值，但这似乎是一种相当笨拙的解决这个问题的方法。是否有任何标签或怪癖，改变自动填充行为，可以用来解决这个问题?
当前回答
经过几个月的努力，我发现解决办法比你想象的要简单得多:
用autocomplete="false"代替autocomplete="off";)
就这么简单，它的工作就像一个魅力在谷歌Chrome浏览器以及!
2019年8月更新(评论中来自@JonEdiger)
注意:网上有很多信息说浏览器现在处理autocomplete='false'与autocomplete='off'相同。至少在这一刻，它阻止了这三个浏览器的自动完成。
在表单级别设置它，然后对于你想关闭的输入，设置为一些无效的值，比如'none':
<form autocomplete="off">
<input type="text" id="lastName" autocomplete="none"/>
<input type="text" id="firstName" autocomplete="none"/>
</form>
其他回答
我真的不喜欢做隐藏字段，我觉得这样做很快就会让人很困惑。
在您想要停止自动完成的输入字段上，这将起作用。将字段设置为只读并集中，像这样删除该属性
<input readonly onfocus="this.removeAttribute('readonly');" type="text">
这所做的是，你首先要删除只读属性，选择字段，在那个时候，最有可能的是，你将填充与您自己的用户输入和弯腰自动填充接管
我需要一些额外的字段才能正常工作，因为chrome实际上填充了许多字段。我还需要以一种比显示更花哨的方式隐藏字段:没有字段才能实际工作。
<style>.stylish { position:absolute; top:-2000px; }</style>
<input id="_____fake_email_remembered" class="stylish" tabindex="-1" type="email" name="email_autofill"/>
<input id="_____fake_userName_remembered" class="stylish" tabindex="-1" type="text" name="userName_autofill"/>
<input id="_____fake_firstName_remembered" class="stylish" tabindex="-1" type="text" name="firstName_autofill"/>
<input id="_____fake_lastName_remembered" class="stylish" tabindex="-1" type="text" name="lastName_autofill"/>
<input id="_____fake_phone_remembered" class="stylish" tabindex="-1" type="text" name="phone_autofill"/>
<input id="_____fake_address_remembered" class="stylish" tabindex="-1" type="text" name="address_autofill"/>
<input id="_____fake_password_remembered" class="stylish" tabindex="-1" type="password" name="password_autofill"/>
<input id="_____fake_password_remembered2" class="stylish" tabindex="-1" type="password" name="passwordRepeated_autofill"/>
对于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"也会保留所有的验证。
如果显示:none不工作，这也是可能的，它似乎是工作的(Chrome v60.0.3112.113):
.hidden-fields {
opacity: 0;
float: left;
height: 0px;
width: 0px;
}
<input type="text" name="username" class="hidden-fields">
<input type="password" name="password" class="hidden-fields">
<your actual login fields></your actual login fields>
我的解决方案取决于三件事:
keydown事件 屏蔽字段名 在提交时删除字段值
首先，我们需要防止用户名和密码都自动补全，因此，最初我们将设置两个标志，i ->用户名和j ->密码为真值，因此如果没有任何keydown字段，i和j都将为真。
在可能的情况下，字段屏蔽发生在服务器端，通过传递随机字符串，它也可以很容易地使用客户端。
这是代码:
$(document).ready(function(){
i= true; //username flag
j= true; // password flag
$("#username{{$rand}}").keydown(function(e){
// {{$rand}} is server side value passed in blade view
// keyboard buttons are clicked in the field
i = false;
});
$("#passowrd{{$rand}}").keydown(function(e){
// {{$rand}} is server side value passed in blade view
// keyboard buttons are clicked in the field
j = false;
});
// Now we will use change event,
$("#username{{$rand}}").change(function(){
if($(this).val() != ''){ //the field has value
if(i){ // there is no keyboard buttons clicked over it
$(this).val(''); // blank the field value
}
}
})
$("#password{{$rand}}").change(function(){
if($(this).val() != ''){ // the same as username but using flag j
if(j){
$(this).val('');
}
}
})
$("#sForm").submit(function(e){ // the id of my form
$("#password-s").val($("#password{{$rand}}").val());
$("#username-s").val($("#username{{$rand}}").val());
// Here the server will deal with fields names `password` and `username` of the hidden fields
$("#username{{$rand}}").val('');
$("#password{{$rand}}").val('');
})
})
下面是HTML:
<form class="form-horizontal" autocomplete="off" role="form" id="sForm" method="POST" action="https://example.com/login">
<input type="hidden" name="password" id="password-s">
<input type="hidden" name="username" id="username-s">
<label for="usernameTDU3m4d3I5" class="col-md-3 control-label" style="white-space: nowrap">Username</label>
<input id="usernameTDU3m4d3I5" placeholder="Username" autocomplete="off" style="border-bottom-left-radius: 10px; border-top-right-radius: 10px; font-family: fixed; font-size: x-large;" type="text" class="form-control" name="usernameTDU3m4d3I5" value="" required="required" autofocus="">
<label for="passwordTDU3m4d3I5" class="col-md-3 control-label" style="white-space: nowrap">Password</label>
<input id="passwordTDU3m4d3I5" placeholder="Password" autocomplete="off" type="password" class="form-control" name="pa-TDU3m4d3I5" required="">
<button type="submit" class="btn btn-success">
<i class="fox-login" style="text-shadow: 0px 1px 0px #000"></i><strong>Login</strong>
</button>
</form>
上述解决方案确实不会消除或阻止用户名和密码的自动补全，但它使自动补全无用。也就是说，在没有敲击键盘按钮的情况下，字段值在提交之前将是空白的，因此用户将被要求输入它们。
更新
我们也可以，使用点击事件来防止自动完成用户列表出现在字段下面，如下所示:
$("#username{{$rand}}").click(function(){
$(this).val('');
i = true;
})
$("#password{{$rand}}").click(function(){
$(this).val('');
j = true;
})
限制:
这种解决方案可能无法在触摸屏设备中正常工作。
最后的更新
我已经完成了如下干净的实现:
preventAutoComplete = true; // modifier to allow or disallow autocomplete
trackInputs = {password:"0", username:"0"}; //Password and username fields ids as object's property, and "0" as its their values
// Prevent autocomplete
if(preventAutoComplete){
$("input").change(function(e){ // Change event is fired as autocomplete occurred at the input field
trackId = $(this).attr('id'); //get the input field id to access the trackInputs object
if (trackInputs[trackId] == '0' || trackInputs[trackId] != $(this).val()){ //trackInputs property value not changed or the prperty value ever it it is not equals the input field value
$(this).val(''); // empty the field
}
});
$("input").keyup(function(e){
trackId = $(this).attr('id');
trackInputs[trackId] = $(this).val(); //Update trackInputs property with the value of the field with each keyup.
});
}
