360 chrome等浏览器自动填充密码无法与vue3表单双向绑定

chrome密码框

2023-09-28 10:49:56

经排查，浏览器在自动填充密码之后并没有触发 onchange事件，但是用原生dom的语法读取输入框时，发现确实已经输入。

修复方法如下

↓ 会员用户可见内容 ↓

js 复制代码

// ===修复谷歌浏览器密码填充没有双向绑定的问题==
// 循环输入框，读取到内容之后直接赋值到原有的对象
function fixGooglePasteBug() {
  const input = document.querySelectorAll('input')
  input.forEach(item => {
    if (item.type == 'password' && item.value){
      unref(modelRef).password = item.value
    }
    if (item.type == 'text' && item.value){
      unref(modelRef).username = item.value
    }
  })
}

在提交按钮位置，调用上述代码再次赋值，为了安全起见，可用nextTick等待数据填充完成再次调用接下来的逻辑

js 复制代码

async function handleValidateButtonClick(e: MouseEvent) {
  fixGooglePasteBug()
  await nextTick();
  //... 正常逻辑
}