浏览器表单自动填充问题

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

问题描述：

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

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就不满足自动填充的条件了。

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