我遇到了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>
我遇到了“现在登录或注册”模式窗口的问题,如果用户已经将他们的凭据保存到浏览器中,这是一个问题。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>