关于谷歌登录输入框的自动填充处理

关于谷歌登录输入框的自动填充处理

▍背景
关于谷歌浏览器自动填充账号密码输入框的问题想必方便了不少开发者，但同时也困扰了不少开发者。近期我也是遇到了一个需求调整，要求不自动填充密码框，此外账户名输入框在焦点的情况下要弹出谷歌浏览器保存的账户名和密码下拉框，细心的你可能会发现，自动填充和密码下拉框并不冲突，但是…情况还是比较复杂，那就开始填坑之旅吧。

▍过程
1.autocomplete=“new-password”
这是一个大家可能会经常使用的方法，最开始我也是使用这个方法，效果是输入框不自动填充了，但是账号密码下拉框只在密码输入框下触发显示（暂时不清楚原因为何，先挖个坑，待日后补，知道原因的小伙伴请留言告诉我呀~）。

2.动态的readonly
鉴于设置autocomplete不能满足需求，只能转向其他方法，那就是readonly，它在输入框的作用与其名称相同，就是只读。通过在username的输入框设置该readonly为true，并且在mounted设置1s的延时之后将其设置为false，可以较好地满足不自动填充账号密码框，同时在账号和密码框获取焦点的时候能触发显示账号下拉框。

<input
  :readonly="isLoginformReadonly"
  v-model="userName"
  type="text"
  placeholder="请输入用户名"
/>

3.当然我也注意到其他伙伴推荐的增加额外input输入框的方法，出于尽量不编写额外标签的原则就没有采用了，具体的大家也可以看看。

<!-- 额外增加的input -->
<input type="password" style="width:0;height:0;float:left;visibility:hidden"/>

▍总结
从业时间短，技术理解较为浅显，还请各位老鸟不吝赐教，谢谢。