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

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

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

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

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


当前回答

就像Dvd Franco说的,对我来说,只有把automplete='off'在所有领域它工作。所以我把jquery规则放在$(document).ready();函数在我的主.js文件

$('form.no_autofill').attr('autocomplete','off');
$('.no_autofill input').attr('autocomplete','off');

其他回答

好吧,因为我们都有这个问题,我花了一些时间来写一个工作的jQuery扩展这个问题。谷歌必须遵循html标记,而不是我们遵循谷歌

(function ($) {

"use strict";

$.fn.autoCompleteFix = function(opt) {
    var ro = 'readonly', settings = $.extend({
        attribute : 'autocomplete',
        trigger : {
            disable : ["off"],
            enable : ["on"]
        },
        focus : function() {
            $(this).removeAttr(ro);
        },
        force : false
    }, opt);

    $(this).each(function(i, el) {
        el = $(el);

        if(el.is('form')) {
            var force = (-1 !== $.inArray(el.attr(settings.attribute), settings.trigger.disable))
            el.find('input').autoCompleteFix({force:force});
        } else {
            var disabled = -1 !== $.inArray(el.attr(settings.attribute), settings.trigger.disable);
            var enabled = -1 !== $.inArray(el.attr(settings.attribute), settings.trigger.enable);
            if (settings.force && !enabled || disabled)
                el.attr(ro, ro).focus(settings.focus).val("");
        }
    });
};
})(jQuery);

只需将其添加到/js/ jQuery. extensions .js这样的文件中,并将其包含在jQuery之外。 将它应用到加载文档时的每个表单元素,如下所示:

$(function() {
    $('form').autoCompleteFix();
});

Jsfiddle测试

Boom,谷歌Chrome和其他人尝试击败这然后。

我能够得到这个实现今天2017年9月7日,但使用在我的MVC视图中生成的随机字符串的FormCollection。

我会首先在我的登录页面的索引控制器中获得一个新的随机密钥,加密并创建一个新的完全唯一的随机字符串(我实际上使用了一个256位的cypher来执行此操作,以及一个唯一的cypher和认证密钥),然后在每个字符串的末尾附加纯文本“用户名”和“密码”,以帮助我从响应视图控制器识别用户名和密码。你也可以把这个普通字符串改成任何东西,只要你知道它的模式并且它是唯一的。

在我看来,我然后适当地使用这些变量,然后在响应控制器中—通过FormCollection搜索并找到匹配的变量—然后使用该项的Key-Value作为相应的用户名和密码进行适当的处理。

The other issue i had which i think is sneaky of Chrome, is that any Any thoughts ? <style> @@font-face { font-family: 'password'; font-style: normal; font-weight: 400; src: url(https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/password.ttf); } </style> <input type="text" name="@Model.UsernameRandomNameString" /> <input style="font-family: 'password'" type="text" name="@Model.PasswordRandomNameString" /> LogOnModel model = new LogOnModel() { UsernameRandomNameString = Cryptography.SimpleEncrypt("Username", UniqueGeneratorKey, UniqueGeneratorKey) + "Username", PasswordRandomNameString = Cryptography.SimpleEncrypt("Password", UniqueGeneratorKey, UniqueGeneratorKey) + "Password", }; I think it a hell of a workaround, but hey it works, and i think it could also be future proof unless google determines the URL of the page has key words in it, then appropriately just adds its stupid extensions on top on any input field - but that's a little drastic.

1月20日chrome更新

上面的解决方案都不起作用,包括添加假字段或设置autocomplete=new-password。是的,这些chrome浏览器不会自动完成,但当你输入密码字段时,它会再次建议密码。

我发现,如果你删除密码字段,然后添加它再次没有id,然后chrome不会自动填充它,也不建议输入密码。

使用类来获取密码值而不是id。

对于firefox来说,仍然需要添加一个虚拟元素。

这个解决方案还允许/禁止基于标志的自动补全:

html:

<!-- form is initially hidden, password field has a dummy id and a class 'id' -->
<form id="loginForm" style="display:none;">
   <span>email:</span><input type="text" placeholder="Email" id="loginEmailInputID"/>
   <span>Password:</span><input class="loginPasswordInput" type="password" placeholder="Password" id="justForAutocomplete"/>
</form>

页面加载:

function hideAutoComplete(formId) {
    let passwordElem=$('#'+formId+' input:password'), prev=passwordElem.prev();
    passwordElem.remove();
    prev.after($('<input type="password" style="display:none">'), passwordElem.clone().val('').removeAttr('id'));
}

if (!allowAutoComplete) hideAutoComplete('loginForm');
$('#loginForm').show();

当你需要密码时:

$('.loginPasswordInput').val();

因为display none似乎不再起作用了 添加

<input type="text" name="fakeusernameremembered"/>
<input type="password" name="fakepasswordremembered"/>

在一个div溢出隐藏,最大宽度和最大高度0px

所以它就变成了:

<div style="overflow: hidden; max-width: 0px; max-height: 0px;">
    <input type="text" name="fakeusernameremembered"/>
    <input type="password" name="fakepasswordremembered"/>
</div>

如果你正在使用Symfony表单,autocomplete=off将不起作用,如果属性应用于树枝模板而不是使用FormBuilder。

用这个:

....
->add('field-name', TextType::class, array(
  'attr' => array(
      'autocomplete' => 'off'
  )
)
....

而不是:

....
{{ form_widget(form.field-name, {'attr': {'autocomplete':'off'}})
....