浏览器表单自动填充问题

我心飞翔 分类:javascript

记录工作总结 - 解决浏览器表单自动填充问题

问题描述:

如果是同域名网站,并且曾经在该网站下登录过账号密码,并且选择了记住账号密码,或者在设置中设置了自动填充设置。

chrome浏览器会对账号密码进行自动填充功能,或者以下拉历史记录的形式给到我们。

自动填充:
image.png

下拉历史记录:
image.png

自动填充的条件:

1、在用户和密码包含在form的情况下,同时包含一个 type="text"和 type="password"元素且不包含readonly和disabled属性,两个元素可以没有name和id属性

2、在没有form的情况下,同时包含一个 type="text"和 type="password"元素且不包含readonly和disabled属性,且两个元素至少都有name或id属性(但name和id可以是任意值但不能是空或空格)。

其中浏览器类型不同甚至相同类型不同版本浏览器不同,都会导致最终效果不同

反正就是有的浏览器,只填充一组,有的浏览器有几组符合条件的都填充,有的不在乎样式,有的在乎。网上搜的一个解释

浏览器填充机制:反复测试后发现浏览器自动填充机制是满足:页面里有一个type=password的input且这个input前面有一个type=text的input的时候就会进行自动填充。firefox和360浏览器的处理方式是:只要检测到页面里有满足填充机制的,不管是不是display:none 的,只要检测到就直接往里填充。而且是有几个符合条件的就填充几个。而chrome 54版本略有不同:满足上面的条件且页面里只有一个type=password 的input。才会自动给第一个type=text 的input填充账号,给type=password 的input填充密码。所以chrome 54版本不存在注册页面自动填充的问题

解决方案

方案:

Chrome

(1)input不填name属性,就填充不上(不明所以)

input的样式可以是display:none 但是貌似有些浏览器版本不生效,所以用visibility:hidden 比较保险
image.png

image.png

(2)下拉历史选择框

去掉了默认的自动填充,依旧还是会有下拉历史选择,而且选中密码后,会把账号填充到离他最近的text类型的input输入框中

image.png

虽然这个密码选择历史的场景不该有,但是一旦发生,用户体验也不好是吧,所以在这个密码input上边加一个隐藏的input框,我试了一下隐藏这个输入框后就失效了,没用了。所以把输入框定位在很远的位置假装是隐藏了

image.png

(3)autocomplete

使用HTML5新属性autocomplete="off" 但禁用input自动填充。这个属性好像是firefox发起的,并不是标准属性,所以这块主要是针对ie和获取浏览器生效。谷歌不承认这个属性。所以在谷歌浏览器上并没有产生任何效果。对于360浏览器好像又不适应所以我们可以通过设置autocomplete="new-password"来实现不填充的效果(网易就是添加了autocomplete)

(4)360极速浏览器

加完以上组合配置,Chrome已经ok了,但是在360极速浏览器上,你会发现怎么还有密码自动填充

于是我又多加了一个输入框,加上readyonly就不满足自动填充的条件了。

image.png

我发现没有固定的解决方案,要是为了保险能兼容各种浏览器,可能需要把多种方法都组合到一起。然后不同浏览器验证一下。

回复

我来回复
  • 暂无回复内容