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

最新推荐文章于 2026-07-14 15:45:33 发布

原创

最新推荐文章于 2026-07-14 15:45:33 发布 · 5.2k 阅读

本文探讨了浏览器自动填充导致的修改支付密码页面输入框出现默认内容的问题。问题源于用户登录后浏览器记住账号密码，再次访问时自动填充。解决方案包括使用隐藏的text和password输入框来规避填充，或者改变首个输入框类型。文中提供了具体代码示例，展示了如何在Antd Vue组件中实现避免自动填充的方法。

项目场景：

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

问题描述

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

原因分析：

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

在这里插入图片描述
而修改支付密码也有第一个是text类型输入框，第二个是password类型输入框，触发了自动填充。