我遇到了chrome自动填充行为的几个形式的问题。
表单中的字段都有非常常见和准确的名称，例如“email”、“name”或“password”，并且它们还设置了autocomplete=“off”。
自动完成标志已经成功禁用了自动完成行为，当你开始输入时，会出现一个下拉的值，但没有改变Chrome自动填充字段的值。
这种行为是可以的，除了chrome填充输入不正确，例如填充电话输入与电子邮件地址。客户抱怨过这个问题，所以它被证实在很多情况下都发生了，而不是我在我的机器上本地操作的某种结果。
目前我能想到的唯一解决方案是动态生成自定义输入名称，然后在后端提取值，但这似乎是一种相当笨拙的解决这个问题的方法。是否有任何标签或怪癖，改变自动填充行为，可以用来解决这个问题?
当前回答
我的解决方案取决于三件事:
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.
});
}
其他回答
我需要一些额外的字段才能正常工作，因为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"/>
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">
这里有两个部分。Chrome和其他浏览器会记住之前输入的字段名的值，并基于此为用户提供一个自动完成列表(值得注意的是，密码类型的输入永远不会以这种方式记住，原因相当明显)。你可以添加autocomplete="off"来防止这种情况发生在你的电子邮件字段上。
但是，您还可以使用密码填充器。大多数浏览器都有自己的内置实现，也有许多第三方实用程序提供此功能。这个，你停不下来。这是用户自己选择保存该信息以便稍后自动填写，完全超出了应用程序的范围和影响范围。
使用css text-security: disc而不使用type=password。
html
<input type='text' name='user' autocomplete='off' />
<input type='text' name='pass' autocomplete='off' class='secure' />
or
<form autocomplete='off'>
<input type='text' name='user' />
<input type='text' name='pass' class='secure' />
</form>
css
input.secure {
text-security: disc;
-webkit-text-security: disc;
}
以下是我提出的解决方案，因为谷歌坚持推翻人们似乎做出的每一个变通办法。
选项1 -选择所有文本点击
为你的用户设置输入的值为一个例子(例如your@email.com)，或者字段的标签(例如Email)，并在你的输入中添加一个名为focus-select的类:
<input type="text" name="email" class="focus-select" value="your@email.com">
<input type="password" name="password" class="focus-select" value="password">
下面是jQuery:
$(document).on('click', '.focus-select', function(){
$(this).select();
});
我真的看不出Chrome会搞砸数值。那太疯狂了。希望这是一个安全的解决方案。
选项2 -设置电子邮件值为一个空间，然后删除它
假设您有两个输入，例如电子邮件和密码，将电子邮件字段的值设置为“”(一个空格)，并添加属性/值autocomplete=“off”，然后使用JavaScript清除此设置。您可以将密码值保留为空。
如果用户出于某种原因没有JavaScript，请确保您在服务器端修改了他们的输入(无论如何您都应该这样做)，以防他们不删除空格。
下面是jQuery:
$(document).ready(function() {
setTimeout(function(){
$('[autocomplete=off]').val('');
}, 15);
});
我将超时设置为15，因为5似乎在我的测试中偶尔可以工作，所以将这个数字增加三倍似乎是一个安全的赌注。
如果没有将初始值设置为空格，Chrome会让输入框显示为黄色，就好像它已经自动填充了一样。
选项3 -隐藏输入
把这个放在表单的开头:
<!-- Avoid Chrome autofill -->
<input name="email" class="hide">
CSS:
.hide{ display:none; }
确保您保留了HTML注释，这样其他开发人员就不会删除它!还要确保隐藏输入的名称是相关的。
