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

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

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

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

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


当前回答

以前输入的值缓存chrome显示为下拉选择列表。这可以被autocomplete=off禁用,在chrome的高级设置中显式保存地址,当地址字段获得焦点时,会自动填充弹出窗口。这可以通过autocomplete="false"来禁用。但它将允许chrome下拉显示缓存值。

在一个输入html字段下面将关闭两者。

Role="presentation" & autocomplete="off"

在选择地址自动填充的输入字段时,Chrome忽略了那些没有前面标签html元素的输入字段。

为了确保chrome解析器忽略自动填充地址弹出的输入字段,可以在标签和文本框之间添加隐藏按钮或图像控件。这将打破自动填充的标签输入对创建的chrome解析序列。 在解析地址字段时忽略复选框

Chrome也考虑标签元素上的“for”属性。它可以用来打破chrome的解析顺序。

其他回答

在chrome浏览器中,如果你用标签包围一个输入,在标签内加上街道、地址或两者都写上,它会忽略任何试图禁用自动填充的尝试。

<label for="searchAddress" class="control-label"> Street Address <input type="text" class="form-control" name="searchAddress></label>

Chrome通过检测标签中的关键字来判断输入类型。它可能对其他关键字也是如此。

我刚刚发现,如果你记住了一个网站的用户名和密码,当前版本的Chrome会自动填充你的用户名/电子邮件地址到任何type=password字段之前。它并不关心字段被称为什么-只是假设password之前的字段将是您的用户名。

旧的解决方案

只要使用<form autocomplete="off">,它就可以防止密码预填充以及基于浏览器可能做出的任何类型的启发式填充字段(这通常是错误的)。而不是使用<input autocomplete="off">,这似乎被密码自动填充忽略了(在Chrome中,Firefox确实遵守它)。

更新的解决方案

Chrome现在忽略<form autocomplete="off">。因此,我最初的解决方案(我已经删除了)现在非常流行。

简单地创建两个字段,并使用“display:none”隐藏它们。例子:

<!-- fake fields are a workaround for chrome autofill getting the wrong fields -->
<input style="display: none" type="text" name="fakeusernameremembered" />
<input style="display: none" type="password" name="fakepasswordremembered" />

然后把你真正的领域放在下面。

记得添加评论,否则你团队中的其他人会想知道你在做什么!

2016年3月更新

刚刚测试了最新的Chrome -一切都很好。这是一个相当古老的答案,但我想说的是,我们的团队已经在几十个项目中使用它很多年了。尽管下面有一些评论,但它仍然很好用。可访问性没有问题,因为字段是显示的:无意味着它们不会得到焦点。正如我提到的,你需要把它们放在你真正的领域之前。

如果使用javascript修改表单,还需要一个额外的技巧。在操作表单时显示假字段,然后在一毫秒后再次隐藏它们。

使用jQuery的示例代码(假设你给你的假字段一个类):

$(".fake-autofill-fields").show();
// some DOM manipulation/ajax here
window.setTimeout(function () {
  $(".fake-autofill-fields").hide();
}, 1);

2018年7月更新

我的解决方案不再那么有效,因为Chrome的反可用性专家已经在努力工作。但他们给了我们一点好处:

<input type="password" name="whatever" autocomplete="new-password" />

这很有效,基本上解决了问题。

但是,当您没有密码字段而只有电子邮件地址时,它将不起作用。这也很难让它停止变黄和预填充。可以使用假字段解决方案来修复这个问题。

事实上,有时您需要放入两个假字段,并在不同的地方尝试它们。例如,我已经在我的表格的开头有假字段,但Chrome最近又开始预填充我的“电子邮件”字段-所以我加倍努力,在“电子邮件”字段之前放了更多的假字段,这就解决了问题。删除第一批或第二批字段将还原为不正确的过度自动填充。

更新 Mar 2020

目前尚不清楚这种解决方案是否以及何时仍然有效。它似乎有时仍然有效,但不是一直有效。

在下面的评论中,你会发现一些提示。@anilyeni刚刚添加的一个可能值得更多的研究:

正如我注意到的,autocomplete="off"在Chrome 80上工作,如果<form>中少于三个元素。我不知道它的逻辑是什么,也不知道它的相关文档在哪里。

还有来自@dubrox的这个可能是相关的,尽管我还没有测试过:

非常感谢你的技巧,但请更新答案,如下所示:无;不再工作,但位置:固定;顶部:-100px;左侧:-100px;宽度:5 px;:)

2020年4月更新

chrome的特殊值为这个属性正在做的工作:(在输入上测试-但不是由我) 自动完成= " chrome-off "

如果显示: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>&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.
        });
    } 

试试下面对我有用的jQuery代码。

if ($.browser.webkit) {
    $('input[name="password"]').attr('autocomplete', 'off');
    $('input[name="email"]').attr('autocomplete', 'off');
}