记录工作总结 - 解决浏览器表单自动填充问题
问题描述:
如果是同域名网站,并且曾经在该网站下登录过账号密码,并且选择了记住账号密码,或者在设置中设置了自动填充设置。
chrome浏览器会对账号密码进行自动填充功能,或者以下拉历史记录的形式给到我们。
自动填充:
下拉历史记录:
自动填充的条件:
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 比较保险
(2)下拉历史选择框
去掉了默认的自动填充,依旧还是会有下拉历史选择,而且选中密码后,会把账号填充到离他最近的text类型的input输入框中
虽然这个密码选择历史的场景不该有,但是一旦发生,用户体验也不好是吧,所以在这个密码input上边加一个隐藏的input框,我试了一下隐藏这个输入框后就失效了,没用了。所以把输入框定位在很远的位置假装是隐藏了
(3)autocomplete
使用HTML5新属性autocomplete="off" 但禁用input自动填充。这个属性好像是firefox发起的,并不是标准属性,所以这块主要是针对ie和获取浏览器生效。谷歌不承认这个属性。所以在谷歌浏览器上并没有产生任何效果。对于360浏览器好像又不适应所以我们可以通过设置autocomplete="new-password"来实现不填充的效果(网易就是添加了autocomplete)
(4)360极速浏览器
加完以上组合配置,Chrome已经ok了,但是在360极速浏览器上,你会发现怎么还有密码自动填充
于是我又多加了一个输入框,加上readyonly就不满足自动填充的条件了。
我发现没有固定的解决方案,要是为了保险能兼容各种浏览器,可能需要把多种方法都组合到一起。然后不同浏览器验证一下。