关于谷歌浏览器(Google)input 自动填充密码问题解决

464 阅读1分钟

遇到问题:在聚焦密码框或者是用户框时,偶尔回出现这种提示

使用您的 Google 帐号保存和填充密码?

登录后,您在此设备上也能获取您 Google 帐号中保存的密码

正常来讲,这种方式对用户使用时会很友好,但是在某些场景会很恶心。

像修改/找回密码时,这种自动填充会很恶心。

机制:经过多次测试发现,Google自动填充的机制

inputtypepassword 或 下一个 inputtypepassword

Google会在聚焦时弹出自动填充弹窗的情况

情况一:
<input type="password"/>

情况二:( 两个input都会触发自动填充的弹窗 )
<input type="text"/>
<input type="password"/>

解决方案: 判断value有值时改变type为password

Vue
<input
  v-model="form.password"
  :type="form.password.length > 0?'password':'text'"
 placeholder='密码'
>

与 type为password的input相邻时,


<el-input
  v-model="form.username"
  type="text"
  placeholder='用户名'
>
//此input仅占位使用
<input type="text" style="position:absolute;z-index:-999">

<el-input
  v-model="form.password"
  :type="form.password.length > 0?'password':'text'"
  placeholder='密码'
>