记录一个由于chrome自动填充引起的bug及解决方案

场景

在一个登录的场景中，当账号输入完整手机号、密码输入了任意字符时登录按钮才亮起，其余状况置灰。如图：

而当用户登录一次后勾选了保存密码，在下次登录时有几率出现输入框获取不到值的情况：

在控制台打印发现输入框的值为空

原因

大概是由于安全方面原因，chrome上无法获取到自动填充的表单值，需要用户点击一下页面才会拿得到值。

解决方案

使用的技术栈为vue。

参考stackoverflow.com/questions/3… 后，我采用的方法是在页面mounted的时候用一个定时器循环检查伪类-webkit-autofill

mounted() {
    this.autofillTimer = setInterval(() => {
        if (document?.querySelectorAll('input:-webkit-autofill')?.length === 2) {
            this.canLogin = true
            clearInterval(this.autofillTimer)
        }
    }, 200)
}

如果length为2即自动填充，将按钮点亮。 保存定时器并在点击页面时清除它。

// 整个页面的点击事件
pageClick() {
  if (this.autofillTimer) clearInterval(this.autofillTimer)
}