浏览器记住密码和回填

表单的一些问题

1. 浏览器记住帐号(验证码)密码

2.浏览器表单回填

 

在浏览器里有一个前端的爬虫，可以抓取到我们的inut type=password，我们成功的提交表单，浏览器会在右上角弹框，询问是否记住密码，但是我们发现有时候记住的不是我们的帐号，比如:

提示我们记住的是验证码，但是产品说这个必须是帐号，这个需求提的我猝不及防，然后就有了这一篇记录。

方案

表单顺序是帐号-验证码-密码-重复密码，我们知道浏览器浏览器记住的是密码和验证码，其实是密码和他的上一个input；我们把密码和验证码在DOM顺序上换个位置，现在的dom顺序是帐号-密码-验证码-重复密码，我们用flex把密码和验证码columen-reverse，这样在视觉上他们顺序符合了设计的预期，在功能上又符合的产品的需求，这样两全其美的方法，当然有着小小的问题，我发现在dom顺序改了之后，点击tab键光标的顺序和dom顺序是一致的，所以光标看起来是1-3-2-4，我们用tabIndex来解决这个问题，然后看起来就是没有问题的。

 

方案

记住密码之后就是回填了，我们有时候发现浏览器回填我们的帐号密码，但是需求是不需要回填，我们了解autoComplete这个属性off不能生效，但是autoComplete="new-password"是可以的，chrome、360、IE11亲测有效