问题现象描述
- 浏览器开启密码自动填充,记住了多个账号密码
- 自动填充后,选中非第一个账号密码
- 点击登录,弹出人机校验,这是账号密码被重置为第一个
问题分析
这里需要了解一下密码自动填充的触发节点,根据观察现象,我猜测满足以下两点:
input的type类型为password必须存在,且input必须为可输入,我试了readonly和disabled下,自动填充是失效的。- 弹框造成了浏览器的
回流,而回流会引起账号密码自动填充。
什么是浏览器重绘和回流
- 重绘
元素的样式变化,比如
color,background,不影响元素在文档中的位置,这时候浏览器只是重绘该元素。 - 回流 首次渲染,布局大小发生变化,比如浏览器窗口大小变化,元素大小位置内容变化,字体变化等,浏览器重新渲染部分或全部文档。
回流必然会引起重绘,重绘不一定会引起回流。
回流比重绘的代价更高。
开发尽量降低回流的触发。
引起该问题的结论
综上所述,那就是浏览器触发回流引起的密码自动填充重置为了第一个账号密码。
问题处理
上面也讲到了input在readonly和disabled下,自动填充是失效的。
有这个结论那就简单了,在触发浏览器回流前,禁止password的input输入框,这样就不会被自动填充重置账号密码了。