阻止表单自动加载浏览器记住的用户名及密码

最新推荐文章于 2022-11-11 14:30:29 发布

浩星

最新推荐文章于 2022-11-11 14:30:29 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签：阻止表单自动加载浏览器记住的用户名及密码

本文链接：https://blog.youkuaiyun.com/qq_41619796/article/details/101037332

vue 专栏收录该内容

110 篇文章

订阅专栏

本文介绍了一种有效防止Element-UI表单中密码字段自动填充的方法，通过在表单前添加不可见的输入框，阻止浏览器默认读取账号密码，适用于密码类型输入。

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

前言：

在使用element-ui的表单是发现一个特别难受的问题，就是如果有密码 type="password" 的话，那么他会自动读取浏览器的账号密码，设置autocomplete="off"无效，οnfοcus="this.type='password'"无效，在这里只说一种方法，经过测试是可以实现功能的

方法：1、在el-form的最前面添加两个input，

         <el-form
          :model="ruleForm2"
          status-icon
          :rules="rules2"
          ref="ruleForm2"
          label-width="0"
          class="demo-ruleForm"
        >
            <!-- 为了解决默认读取页面账户密码的问题(START) -->
              <el-input class='zc_display' type="text"/>
              <el-input class='zc_display' type="password"/>
            <!-- 为了解决默认读取页面账户密码的问题(END) -->
            
            ...
        </el-form>

2、样式里添加input的样式，

/******为了解决默认读取页面账户密码的问题******/
.zc_display{
  position: absolute;
    left: -10000px;
    top: -10000px;
    height: 0;
    width: 0;
}