PC端浏览器自动填充账号密码输入框问题该如何解决？

项目场景：

个人中心界面有个子菜单——修改支付密码，可以进行支付密码设置和修改。

---

问题描述

修改支付密码页面有三个输入框，第1个是type="text"的文本类型输入框，最后2个是type="password"的密码类型输入框，测试发现每次进入修改密码页面，前两个输入框就会莫名其妙地出现默认内容，输入框应该都是空内容的，测试人员也没去输入，刚进来输入框就有输入的内容是有问题的。如下图：

---

原因分析：

检查代码发现输入框并没有设置默认内容，而且也没有主动给输入框赋值的相关处理代码，并且发现这种自动填充内容现象第一个输入框每次填充的都是当前账号前几位（验证码有输入限制处理只能是4位），每次也只是填充2个输入框，于是合理推论：由于在登录页面输完账号和密码登录后浏览器有时会自动弹出是否记住密码弹窗，然后用户点击记住后，账号密码就会被浏览器缓冲起来，下次再进入同域名网站中，只要遇到页面中第1个输入框是text类型，第2个输入框是password类型，就会触发浏览器的自动填充账号密码功能。但在修改支付密码页面是禁止填充的，下图是项目中问题分析图、谷歌浏览器自动填充功能设置页面。

而修改支付密码也有第一个是text类型输入框，第二个是password类型输入框，触发了自动填充。

---

解决方案：

上图中能看到浏览器缓冲的对应网站的账号密码，可以去删除对应账号密码来解决这个问题，但这种解决方案不切实际，所以需要根据浏览器自动填充的识别策略来解决，既然浏览器识别的是页面中第1个输入框是text，紧接着第二个是password的输入框，出现这种情况就会自动填充，那么我们可以通过以下方案来解决：① 打乱顺序（不切实际，哪有密码框在账号上面排序的）；② 添加多余的账号密码框来顶替被自动填充；③ 改变第1个输入框类型破坏识别策略。

• 添加多余的输入框替代被填充的账号、密码输入框，将其设为不显示，要保证替代填充的输入框放在原来被填充的输入框前面，且必须是text、password类型，顺序也不能错。

<form>
	// 用来被顶替自动填充的输入框
	<input type="text" style="display:none" />
	<input type="password" style="display:none" />
	// 页面中需要显示且不希望被填充的输入框
	<input type="text" />
	<input type="password" />
</form>

注：需要替代填充的输入框要和页面需要显示的输入框放在同一个表单域中，否则不生效。未使用form标签则不用考虑这点。
下图是本人自己项目中的代码，使用的是antd-vue组件输入框，未设置type默认是text类型输入框。
未放到同一个表单域中，未生效：

放到同一个表单域中，生效：

• 修改第一个输入框类型，让其不为text类型，当点击当前输入框时再内部改成text类型，这样也能避免刚进入页面被自动填充。
  亲测发现目前只有type='password'类型输入框既不影响页面输入框样式又能解决自动填充问题，其他类型还是会被自动填充。

<input type="password" onFocus="$event.target.type='text'" />

本人项目中代码处理：