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

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

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

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

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


当前回答

2016年谷歌Chrome开始忽略autocomplete=off,尽管它在W3C中。他们发布的答案是:

这里棘手的部分是,在web的某个地方,autocomplete=off成为许多表单字段的默认值,而没有真正考虑这是否对用户有好处。这并不意味着不存在不希望浏览器自动填充数据的有效情况(例如在CRM系统上),但总的来说,我们认为这些是少数情况。因此,我们开始忽略autocomplete=off的Chrome自动填充数据。

本质上说:我们更了解用户想要什么。

当需要autocomplete=off时,他们打开了另一个错误来发布有效的用例

在我所有的B2B应用程序中,我还没有看到与自动完成相关的问题,但只在输入密码类型时出现。

如果屏幕上有任何密码字段,即使是隐藏的,自动填充步骤。 要打破这种逻辑,如果不打破自己的页面逻辑,可以将每个密码字段放入自己的表单中。

<input type=name >

<form>
    <input type=password >
</form>

其他回答

在某些情况下,即使autocomplete属性被设置为关闭,浏览器也会继续建议自动补全值。这种出乎意料的行为可能会让开发人员感到困惑。真正强制no-autocompletion的技巧是为属性分配一个随机字符串,例如:

autocomplete="nope"

对我来说很简单

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

做到了。

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

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

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

我遇到了“现在登录或注册”模式窗口的问题,如果用户已经将他们的凭据保存到浏览器中,这是一个问题。sign in和register字段都被填充了,所以我可以用下面的angular js指令来清除它们:

(function () { "use strict"; var directive = function ($timeout) { return { restrict: "A", link: function (scope, element, attrs) { $timeout(function () { element.val(" "); $timeout(function () { element.val(""); }); }); } }; }; angular.module("app.directives").directive("autofillClear", ["$timeout", directive]); }());

它基本上与之前使用jquery的一些答案相同,但以一种角度的方式完成。

经过几个月的努力,我发现解决办法比你想象的要简单得多:

用autocomplete="false"代替autocomplete="off";)

就这么简单,它的工作就像一个魅力在谷歌Chrome浏览器以及!


2019年8月更新(评论中来自@JonEdiger)

注意:网上有很多信息说浏览器现在处理autocomplete='false'与autocomplete='off'相同。至少在这一刻,它阻止了这三个浏览器的自动完成。

在表单级别设置它,然后对于你想关闭的输入,设置为一些无效的值,比如'none':

<form autocomplete="off"> 
  <input type="text" id="lastName" autocomplete="none"/> 
  <input type="text" id="firstName" autocomplete="none"/>
</form>