关于浏览器账号密码自动填充引发的问题

325 阅读1分钟

问题现象描述

  • 浏览器开启密码自动填充,记住了多个账号密码
  • 自动填充后,选中非第一个账号密码
  • 点击登录,弹出人机校验,这是账号密码被重置为第一个

问题分析

这里需要了解一下密码自动填充的触发节点,根据观察现象,我猜测满足以下两点:

  • inputtype类型为password必须存在,且input必须为可输入,我试了readonlydisabled下,自动填充是失效的。
  • 弹框造成了浏览器的回流,而回流会引起账号密码自动填充。

什么是浏览器重绘和回流

  • 重绘 元素的样式变化,比如colorbackground,不影响元素在文档中的位置,这时候浏览器只是重绘该元素。
  • 回流 首次渲染,布局大小发生变化,比如浏览器窗口大小变化,元素大小位置内容变化,字体变化等,浏览器重新渲染部分或全部文档。

回流必然会引起重绘,重绘不一定会引起回流。

回流比重绘的代价更高。

开发尽量降低回流的触发。

引起该问题的结论

综上所述,那就是浏览器触发回流引起的密码自动填充重置为了第一个账号密码。

问题处理

上面也讲到了input在readonlydisabled下,自动填充是失效的。

有这个结论那就简单了,在触发浏览器回流前,禁止password的input输入框,这样就不会被自动填充重置账号密码了。