我遇到了chrome自动填充行为的几个形式的问题。

表单中的字段都有非常常见和准确的名称,例如“email”、“name”或“password”,并且它们还设置了autocomplete=“off”。

自动完成标志已经成功禁用了自动完成行为,当你开始输入时,会出现一个下拉的值,但没有改变Chrome自动填充字段的值。

这种行为是可以的,除了chrome填充输入不正确,例如填充电话输入与电子邮件地址。客户抱怨过这个问题,所以它被证实在很多情况下都发生了,而不是我在我的机器上本地操作的某种结果。

目前我能想到的唯一解决方案是动态生成自定义输入名称,然后在后端提取值,但这似乎是一种相当笨拙的解决这个问题的方法。是否有任何标签或怪癖,改变自动填充行为,可以用来解决这个问题?


当前回答

上面提到的建议我都试过了,但是没有一个管用。我使用谷歌的地方自动完成指定的输入,这是相当丑陋的,如果有谷歌chrome自动填充上面谷歌的地方自动完成列表。甚至设置autocomplete="anything"是无用的,因为autocomplete插件本身setf这个attr为"off",它完全被chrome忽略。

所以我的解决方案是:

var fixAutocomplete = window.setInterval(function(){
    if ($('#myinput').attr('autocomplete') === 'false') {
        window.clearInterval(fixAutocomplete);  
    }

    $('#myinput').attr('autocomplete', 'false');
}, 500);

其他回答

我的解决方案取决于三件事:

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>&nbsp;&nbsp;
                                </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.
        });
    } 

对我来说很简单

<form autocomplete="off" role="presentation">

做到了。

在多个版本上进行了测试,最后一次尝试是在56.0.2924.87

我发现,添加这个到表单阻止Chrome使用自动填充。

<div style="display: none;">
    <input type="text" id="PreventChromeAutocomplete" name="PreventChromeAutocomplete" autocomplete="address-level4" />
</div>

在这里找到。https://code.google.com/p/chromium/issues/detail?id=468153#hc41

真的令人失望的是,Chrome已经决定它比开发人员更了解何时自动完成。有微软的感觉。

以下是我提出的解决方案,因为谷歌坚持推翻人们似乎做出的每一个变通办法。

选项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注释,这样其他开发人员就不会删除它!还要确保隐藏输入的名称是相关的。

通过设置自动完成关闭应该在这里工作,我有一个例子,这是谷歌在搜索页面使用。我从inspect element找到了这个。

编辑: 如果off不起作用,则尝试false或nofill。在我的情况下,它是chrome 48.0版本