不同浏览器的autocomplete特性

最新推荐文章于 2022-07-21 10:53:25 发布

逸尘️

最新推荐文章于 2022-07-21 10:53:25 发布

阅读量1.6k

点赞数 1

分类专栏： html

html 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

自动完成（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使用。