谷歌浏览器账号密码自动填充和明文显示问题

爱吃鱼的喵达力

于 2021-11-25 18:29:38 发布

阅读量2.6k

点赞数

分类专栏：前端文章标签： javascript html5 vue.js

本文链接：https://blog.csdn.net/weixin_46103566/article/details/121543870

版权

本文探讨了在项目中遇到谷歌浏览器自动填充账号密码并显示明文的困扰，提出了解决方案。主要涉及修改input[type='password']为添加readonly属性和事件监听，同时使用auto-complete='new-password'防止自动填充。在Vue+Element项目中，通过jQuery处理场景切换时密码框的状态。对于多密码输入的情况，避免节点冲突，通过ID而非类名选择器来操作节点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在项目中遇到谷歌会自动填充账号密码并且点击有明文提示的问题，查阅资料结合理解最终解决问题。现总结如下：
1.上图
在这里插入图片描述
很明显看到点击后有明文提示，在登录页面时我们或许需要登录提示。但是在其它页面出现这个情况明显是需要解决的。究其原因是input框中type为password造成的，那么我们便针对此做出input添加readonly属性以及事件监听复写。自动填充可通过auto-complete="new-password"解决
2.项目代码（vue+element）自行引入jquery

template
<el-form-item prop="password">
                <el-input class="password"
                          ref="password"
                          maxlength="20"
                          v-model="loginForm.password"
                          :type="passwordType"
                          placeholder="密码"
                          name="password"
                          @blur="capsTooltip = false"
                          @keyup.enter.native="handleLogin"
                          prefix-icon=<