不同浏览器的autocomplete特性

By
写代码

自动完成(autocomplete)允许浏览器预测对字段的输入。当用户在字段开始键入时,浏览器会基于之前键入过的值,显示出在输入框中填写的选项。

autocomplete属性适用于form表单,以及表单内的input类型:text, search, url, telephone, email, password, datepickers, range 以及 color

通常,自动完成是浏览器默认启用的,但是对于用户来说,明显是有隐私风险的,因此浏览器会允许用户通过设置浏览器来禁用自动完成。但是,一些数据在表单提交之后就不会再用了(比如一次性的pin码)或者包含敏感信息(如身份证、信用卡安全码等)。作为网站开发者,在这些情况下,当然会希望不管浏览器有没有启用自动完成功能,都统一禁用它。

浏览器支持哪些类型的autocomplete取值?

这里有个列表

如何禁用自动完成?

通常,禁用的方法是给form表单设置一个autocomplete="off",这样会完成两件事:

1、告诉浏览器不要记录用户输入的内容,以用于下次自动填写这个或者类似表单,尽管各个浏览器遵循的规则大相径庭;
2、禁止浏览器在session历史中缓存表单数据。当表单数据被缓存在session历史中时,某些情况下,用户提交表单然后返回表单页面之后,信息会自动填写。

通常,给表单设置就可以完成禁用功能。但是在Chrome下有个问题,就是只给form表单设置autocomplete="off",而内部各个input框不设置autocomplete="off",在用户需要自动填写建议(通常是双击输入框)时,Chrome会给提示“当前表单禁止自动填写”,当表单和内部input框都设置了autocomplete="off",则不会有这个提示。

所以,给表单和内部所有input框都设置autocomplete="off"是更稳妥的做法。该问题的具体说明在这里

但是,总有些例外……有时候(不知道具体什么时候)浏览器会在自动完成设置了off之后继续提供自动完成的值!如果遇到这个情况,可以试试给input框取不在自动完成取值列表里的值,比如autocomplete="nope",这样,浏览器找不到自动完成的类型,就会放弃尝试。

例外的例外,就是登录表单!

作为开发者,可能尝试给登录表单的autocomplete设置off、on、true、false、nope、wtf等等值,并且不管是给表单设置,还是给输入框单个设置,发现都完全没有效果。之前说好的可以的,为什么到登录表单这里,浏览器就说话不算数了呢?

登录表单的自动完成,以及各浏览器表现

现代浏览器一般都实现了统一的密码管理:当用户输入账号密码登录了一个网站,浏览器就会记住账号和密码,下次登录就不用再次输入账号密码。这样的好处很明显:所有的记录都在浏览器端,增强了网络安全性,并且得益于自动填写,用户可以选择更复杂难记的密码以增强安全性。因此,很多的浏览器在登陆表单这里,开始不支持autocomplete="off"设置,具体表现在两方面:

1、如果网站给表单设置了autocomplete="off",同时表单包含账号和密码框,浏览器仍然会记住密码,如果用户同意,浏览器会在下次访问时自动填写;

2、如果网站给账号和密码输入框设置了autocomplete="off",浏览器仍然会记住密码,如果用户同意,浏览器会在下次访问时自动填写。

这个特性在Firefox (> 38), Google Chrome (> 34)和Internet Explorer (> 11)可见。

但是有时候,开发者不得不禁用密码框的自动填写,因为很有可能另外一个人也在某个时候用这台电脑,这时候自动填写就比较尴尬了。这时候,可以使用autocomplete="new-password"来强制填写新密码。不过这个特性只可见于chrome,Firefox还不支持。

并且,自动填写作为一个浏览器操作,触发的事件和效果也各不相同:

firefox:触发input事件,并且底色不会改变;

chrome:不触发input事件,底色变为浅黄色;

搜狗:触发input事件,底色变为浅黄色。

所以希望通过input来统一处理,首先要过chrome这一关。

如何禁用自动填写

chrome,只需要给密码框设置autocomplete=”new-password”即可不记住密码;

Firefox,由于不支持new-password,所以只能用老办法:

原理:浏览器只会找到第一个type="password"的输入框,并和该输入框之前的一个配对,作为一个账号密码组合。写两个隐藏框,欺骗浏览器,对于用户,可以正常使用。注意:chrome会忽略display:none的输入框,仍然能找到下面的正常输入框,所以需要用position:absolute之类的技巧隐藏。并且,chrome已经支持记住多个输入框内容,所以该方法配合了new-password使用。

其他浏览器,特别要注意的是,一些国产浏览器,对这部分配置不统一,比如搜狗浏览器,无论怎么设置,都会强制记住密码并自动填写,很尴尬。

参考文档:
1、https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
2、https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-autocomplete

3

Comments: 4

  1. 真辛苦啊,还是不要鸟了,什么都不设置。

    06月03日
  2. 算了,我怕我越設計越亂

    06月07日
  3. 强迫症必备教程啊 :!:

    07月24日
  4. 貌似好久没来了,这篇也太巧了,说到这个,最近对输入框还真的有一念想过是否可以禁止浏览器的自动填入,因为平时也遇到过一些输入框自动填了并不想填的内容。

    08月10日

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

:razz: