我遇到了chrome自动填充行为的几个形式的问题。
表单中的字段都有非常常见和准确的名称，例如“email”、“name”或“password”，并且它们还设置了autocomplete=“off”。
自动完成标志已经成功禁用了自动完成行为，当你开始输入时，会出现一个下拉的值，但没有改变Chrome自动填充字段的值。
这种行为是可以的，除了chrome填充输入不正确，例如填充电话输入与电子邮件地址。客户抱怨过这个问题，所以它被证实在很多情况下都发生了，而不是我在我的机器上本地操作的某种结果。
目前我能想到的唯一解决方案是动态生成自定义输入名称，然后在后端提取值，但这似乎是一种相当笨拙的解决这个问题的方法。是否有任何标签或怪癖，改变自动填充行为，可以用来解决这个问题?
当前回答
这是如此简单和棘手:)
谷歌chrome基本上会搜索<form>， <body>和<iframe>标签内的每个第一个可见密码元素，以启用自动填充，因此要禁用此功能，您需要添加一个虚拟密码元素，如下所示:
if your password element inside a <form> tag you need to put the dummy element as the first element in your form immediately after <form> open tag if your password element not inside a <form> tag put the dummy element as the first element in your html page immediately after <body> open tag You need to hide the dummy element without using css display:none so basically use the following as a dummy password element. <input type="password" style="width: 0;height: 0; visibility: hidden;position:absolute;left:0;top:0;"/>
其他回答
我想我该把我的药发上去。发现你不能使用显示:没有，所以我想出了一个快速和肮脏的解决方案，只是使假输入小，并将其移出视线。到目前为止一切顺利，直到他们再次打破它。
<input id="FakePassword" type="password" style="float:left;position:relative;height:0;width:0;top:-1000px;/>
对于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自动填充我发现这个解决办法。
问题
HTML
<div class="form">
<input type="text" placeholder="name"><br>
<input type="text" placeholder="email"><br>
<input type="text" placeholder="street"><br>
</div>
http://jsfiddle.net/xmbvwfs6/1/
上面的例子仍然会产生自动填充的问题，但是如果你使用required="required"和一些CSS，你可以复制占位符，Chrome不会选择标签。
解决方案
HTML
<div class="form">
<input type="text" required="required">
<label>Name</label>
<br>
<input type="text" required="required">
<label>Email</label>
<br>
<input type="text" required="required">
<label>Street</label>
<br>
</div>
CSS
input {
margin-bottom: 10px;
width: 200px;
height: 20px;
padding: 0 10px;
font-size: 14px;
}
input + label {
position: relative;
left: -216px;
color: #999;
font-size: 14px;
}
input:invalid + label {
display: inline-block;
}
input:valid + label {
display: none;
}
http://jsfiddle.net/mwshpx1o/1/
通过设置自动完成关闭应该在这里工作，我有一个例子，这是谷歌在搜索页面使用。我从inspect element找到了这个。
编辑: 如果off不起作用，则尝试false或nofill。在我的情况下，它是chrome 48.0版本
我的解决方案取决于三件事:
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.
});
}
