vue 项目实现阻止浏览器记住密码

​在各个浏览器中,登录输入密码一般都会弹出是否记住密码的功能,如果记住之后,会在各个密码框自动填充记住的密码,这无疑是一种不安全的操作,所以要实现禁用阻止浏览器记住密码的行为

查阅资料,也得到很多方法

  • 1、使用 autocomplete="off"
  • 2、使用 autocomplete="new-password"
  • 3、在真正的密码框之前增加相同name的input框
  • 4、使用readonly属性,聚焦时移除该属性
  • 5、将type=password改为text,修改样式改为*或者小黑点

以上的方法我试过1、2,测试发现不能完全实现,浏览器记住密码的弹窗还是会弹出,不排除我哪里没改全,3、4没试,因为感觉改动有点多,最终我采纳了第5种方案,代码如下

复制代码
 <el-form-item v-if="showPassword" prop="password">
          <el-input
            ref="password"
            v-model="loginForm.password"
            type="text"
            class="no-autofill-pwd"
            placeholder="密码"
          >
            <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
          </el-input>
        </el-form-item>

.no-autofill-pwd {
  /deep/ .el-input__inner {
    -webkit-text-security: disc !important;
  }
}

在谷歌浏览器以及edge浏览器测试,记住密码功能被禁用,密码也不会自动填充 ​

相关推荐
技术钱38 分钟前
vue3 封装图片上传预览组件支持docx、excel、pdf、图片、txt格式
vue.js·pdf·excel
kyle~43 分钟前
C++--- override 关键字 强制编译器验证当前函数是否重写基类的虚函数
java·前端·c++
Light601 小时前
像素退场,曲线登场:现代响应式 CSS 全家桶 | 领码课堂
前端·css·响应式设计·css函数·布局系统·相对单位·设计令牌
爱生活的苏苏2 小时前
elementUI 表单验证-联动型校验
前端·javascript·elementui
一只小风华~3 小时前
Vue Router 路由元信息(meta)详解
前端·javascript·vue.js
*且听风吟4 小时前
html 实现鼠标滑动点亮横轴
前端·javascript·html
计算机学姐4 小时前
基于微信小程序的垃圾分类管理系统【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
武昌库里写JAVA5 小时前
C语言 #pragma once - C语言零基础入门教程
vue.js·spring boot·sql·layui·课程设计
iCoding915 小时前
前端分页 vs 后端分页:技术选型
前端·后端·系统架构
mingtianyihou335 小时前
使用 Service Worker 限制请求并发数
前端