Vue禁止浏览器自动填充

Boriska1996

关注

原创最新推荐文章于 2026-06-10 10:12:29 发布 2.8k 阅读 AI 写同款· GEO 优化 ›

别再让浏览器‘自作聪明’！Vue/Ant Design项目中修改密码页自动填充的3种实战解法本文针对Vue/Ant Design项目中浏览器自动填充密码的问题，提供了三种实战解决方案：隐形输入框拦截、动态类型切换技术和表单隔离策略。这些方法有效防止浏览器自动填充旧密码，提升用户体验和安全性，同时保持Ant Design组件的UI一致性。特别适合企业级应用开发中处理敏感表单场景。阅读详情

如何禁止谷歌浏览器自动填充密码

这里以elementUI为例：

有给input加autocomplete="off"的

        <el-form-item label="原密码：" prop="oldCode">
          <el-input v-model="form.oldCode" placeholder="请输入原密码" autocomplete="off" clearable></el-input>
        </el-form-item>

还有加style="display:none"的

<input style="display:none" type="text" name="fakeusernameremembered"/>

以上方法亲测都不是特别好用

可以通过以下方法解决

在type为passworld的input中加auto-complete="new-password"属性即可

直接上代码：

        <el-form-item label="新密码：" prop="newCode">
          <el-input v-model="form.newCode" type="password" placeholder="请输入新密码" auto-complete="new-password" ></el-input>
        </el-form-item>