关于浏览器自动填充

[jwenjian]

先回顾个新闻: W3C将与WHATWG合作制定最新HTML和DOM规范

接下来再贴一个谷歌浏览器的issue, Issue 468153: autocomplete=off is ignored on non-login INPUT elements

W3C关于autocomplete属性的定义:

定义和用法

autocomplete 属性规定输入字段是否应该启用自动完成功能。

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

注释：autocomplete 属性适用于

，以及下面的 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。

语法

<input autocomplete="value">

取值

值	描述
on	默认。规定启用自动完成功能。
off	规定禁用自动完成功能。

按照W3C的标准, 对于input等标签来说, 默认启用了自动完成, 浏览器就可以在你点击这些标签的时候给你推荐之前输入的值.

如果你不想让浏览器在某些输入框上启动自动完成, 比如登录界面的验证码输入框, 由于每一次验证码都不一样, 所以让浏览器推荐之前输入的验证码的值是无意义的, 这个时候可以通过设置autocomplete=off来告诉浏览器.

但是.

在上面贴出的谷歌浏览器的issue中, 有人发现谷歌浏览器无视了页面元素中autocomplete=off的设置, 仍然对这些元素进行自动填充和输入提示.

开发者对这个issue的回复如下:

bu fan yi le

First off, thanks for everyone's feedback on this. I apologize for our delay in clarifying our stance. We've been working to finalize our policy regarding Autofill and the autocomplete attribute, and we've been making changes to this over the past few months (as some of you have noticed).

First and foremost, Autofill in Chrome exists to help our everyday users get through common forms (address forms, contact forms, checkout forms, etc) across the web. This has become especially important on mobile devices, where typing on virtual keyboards is both difficult and annoying. Autofill tries to make this experience better, and it's used millions of times per day by Chrome users.

The tricky part here is that somewhere along the journey of the web autocomplete=off become a default for many form fields, without any real thought being given as to whether or not that was good for users. This doesn't mean there aren't very valid cases where you don't want the browser autofilling data (e.g. on CRM systems), but by and large, we see those as the minority cases. And as a result, we started ignoring autocomplete=off for Chrome Autofill data [1].

We don't just ignore the autocomplete attribute, however. In the WHATWG standard, we defined a series of new autocomplete values that developers can use to better inform the browser about what a particular field is, and we encourage developers to use those types. [2]

In cases where you really want to disable autofill, our suggestion at this point is to utilize the autocomplete attribute to give valid, semantic meaning to your fields. If we encounter an autocomplete attribute that we don't recognize, we won't try and fill it.

As an example, if you have an address input field in your CRM tool that you don't want Chrome to Autofill, you can give it semantic meaning that makes sense relative to what you're asking for: e.g. autocomplete="new-user-street-address". If Chrome encounters that, it won't try and autofill the field.

We encourage developers to take advantage of Autofill. We announced during the Chrome Dev Summit in 2015 that when Autofill is enabled we see 25% more forms submitted than when it's disabled [3]. Users find high value in Autofill, and we want to encourage users and developers to continue to take advantage.

着重看下上面我加粗的部分.

所以, 如果你想在谷歌浏览器中让你的HTML标签禁止自动填充和自动完成, 那么就给这些标签的autocomplete属性设置一个有意义的值, 如: captcha-for-login, user-address, do-not-autocomplete-this-one等等.

另外, 如果你发现你的网站的页面没有显式的禁用自动填充和自动完成, 但是在谷歌浏览器中这个功能一直不生效, 很有可能是因为谷歌浏览器认为你的网站不够安全. 具体参照谷歌浏览器的帮助文档:

Chrome doesn't suggest my saved info
If you don't get suggestions when you fill in a form, either:

• The website might not be secure enough to get this info from Chrome. If the website is secure, learn how to fix issues with saved info.
• Chrome might not detect certain fields in the form.

参考

https://support.google.com/chrome/answer/142893?hl=en-GB
https://bugs.chromium.org/p/chromium/issues/detail?id=468153#c164
http://www.w3school.com.cn/tags/att_input_autocomplete.asp
https://gist.github.com/niksumeiko/360164708c3b326bd1c8