在浏览器中提交表单后,浏览器一般会提示“是否需要记住密码”,确认后在下次提交表单的时候会自动填充某些输入框。
但是在某些情景下(例如在提现,充值的页面),自动填充密码就很不安全。需要采用一定的手段来阻止浏览器自动填充。
在解决的过程中遇到了一些坑,这里做一下笔记:
使用HTML属性 autocomplete="off"
由于自动填充这个特性是浏览器自己实现的,autocomplete
这个属性也没有被写入W3C规范。很多浏览器都会直接忽略这个属性。无法禁用自动填充。
使用js在页面加载的时候设置input的value为空
很自然能想到的一个办法,但是浏览器的自动填充居然是在js执行完后再填充的。。。在使用js设置了input的value为空后,浏览器又把input自动填充,无法解决问题。
增加<input type=”password”/>
网上流传甚广的一个方法。这个方法在大部分版本的浏览器上是可行的,但是在某些高版本的浏览器和Safari中失效。后面介绍的几种方法都是基于这个方法的改进。
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
增加form
这个方法较上面那个解决了Safari下自动填充的问题。但是在某些高版本Chrome下失效。(经测试Chrome 46.0可行,Chrome 47.0失效)
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
最终解决方案1
这个方案结合了上面两种方法,最终连Chrome 47.0下自动填充的问题也解决掉。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
这个方法中需要注意的是与目标input同辈的input不能设置成 display:none
,如果设置后再Chrome 47.0上会自动填充,因此只能使用其他手段把这个input隐藏。
最终解决方案2
可以在不需要默认填写的input框中设置 autocomplete="new-password"
网上咱没有找到对其详细解释,但是发现163邮箱的登录注册是这么用的,所以就借鉴借鉴咯,测试之后也是可以解决问题的,也是最简单的解决办法,网易给您点个赞!