蓝狮官网聊聊:autofill和autocomplete自动填充

一、关于表单自动填充
表单自动填充是个好功能,因为可以省去用户自己输入的麻烦。

比方说一个 name 属性值是 email 的输入框,蓝狮注册登陆聚焦点击后,可能就出现邮箱列表。奇怪,怎么出现了手机号?

应该是某个产品的 name 属性值是email,但是却支持手机号输入,然后被浏览器记住了。

大多数时候,用户很喜欢这个功能。

但是有时候,用户并不需要。

比方说验证码输入框,每次的验证码都是随机的,是没有任何理由是需要浏览器进行记忆的。

以及,如果采用了浏览器的自动填充input输入框的样式,比方说背景色,就会变成浏览器默认的自动填充背景色。

而这种浏览器默认的色值往往和产品的主题色并不一致,产品或者设计师往往会要求进行重置。

于是,此时,表单自动填充的行为就变得不美丽了,希望取消。

浏览器也确实提供了取消自动填充的html属性 autocomplete 以及匹配自动填充状态的 :autofill 伪类,既然浏览器有了能力,似乎问题到此结束了。

然而非也,又很多时候,明明设置了 autocomplete=”off” ,但是依然有自动填充。

咦?这是怎么回事呢?

没有什么怎么回事,就是浏览器的策略,浏览器说不要你觉得,而是我觉得 !

我们可以在 caniuse 上 看到对各个浏览器那种情况下 autocomplete=”off” 无效的描述,具体如下:

Chrome浏览器在用户使用了自动填充功能的情况下, autocomplete=”off” 无效。
Safari浏览器在 username,email 和 password文本框的时候,关闭自动填充无效。
Firefox浏览器则是在登录表单中无法使用 autocomplete=”off” 关闭自动提示。
所以,问题就变成了,autocomplete off 无效怎么办?

二、autocomplete off 无效怎么办
这个要分情况。

一种是阻止非交互自动填充,一种是阻止交互式自动填充。

阻止非交互自动填充
所谓非交互自动填充,指的是无需用户操作,一进入页面,浏览器就帮你把对应的数据填充好了。

例如账号和密码是比较常见的自动填充能力。

例如有如下所示的HTML代码: 账号: 密码:

如果你有让浏览器记住当前域名下的密码,则一进入页面就有可能会看到类似下面这样的自动填充:

此时,你给输入框元素,哪怕给外面的 元素(如果有)设置autocomplete off都是无效的,那该怎么办?

· 根据我的测试,效果比较好的,是一种名为“李代桃僵”的方法,就是在表单元素的前面插入两个替身使者,就像下面这样的:

账号:
密码:
· 对password密码输入框设置 autocomplet=”new-password” 在Firefox浏览器下有效,不过在Chrome浏览器下无效。

· 还可以给密码输入框设置 readonly 属性,在第一次按下的时候移除来规避自动填充:


虽然上面的方法可以让默认进入的时候没有自动填充,但是,当用户点击输入框的时候,又会出现类似下面的烦人提示,该如何规避呢?

无解!

没必要规避,密码的系统呼出框建议就无视好了。

如果非要解决,也可以,使用普通input输入框覆盖在password输入框上面,蓝狮官网颜色设置为透明,光标颜色设置为文字颜色,隐藏边框和背景色。

代码示意:



.cover {
position: absolute;
-webkit-text-fill-color: transparent;
border-color: transparent;
background: none;
}
.cover,
.cover ~ input {
font-family: Consolas, Monaco, “Courier New”, monospace;
}
然后密码输入框的value和覆盖的输入框实时同步即可。

此时,focus密码框就不会有系统的密码管理提示了。

眼见为实,您可以狠狠地点击这里: 密码输入框的自动填充和系统提示关闭demo

阻止自动填充
这个的解决相对简单点,多出现在相同name属性值的输入框,或者兄弟输入框有着历史相同name或者类型数据记录的时候。

此时,要么使用 autocomplete=”off” ,要么使用 autocomplete=”new-password” 。

如果上面两个属性值都无效,那就……可以整个在线demo,我可以帮大家看下怎么回事。

例如一开始那个name属性值是email的输入框的下拉提示,在我设置 autocomplete=”off” 之后,再次点击输入框,再也看不到下拉出现了。

0 Comments
Leave a Reply