elementui密码框自动回填密码的解决办法

会自动回填用户名和密码

最初代码是这样写的,发现了会回填用户名和密码。
并且还回填了其他input框(穿梭框)

使用 show-password 属性即可得到一个可切换显示隐藏的密码框[elementui 提供的属性]
原生属性 autocomplete: 属性值为 off / on 。
"on": 允许浏览器自动填充该字段
"off": 禁止浏览器自动填充该字段
此外,HTML5还引入了一系列更具体的值,例如:
"new-password": 新密码(浏览器可能会建议一个强密码)。可以处理浏览器回填用户密码
"current-password": 当前密码
上面这2个非常有用。

"name": 全名
"given-name": 名字
"family-name": 姓氏
"email": 电子邮件地址
"username": 用户名
"street-address": 街道地址
"postal-code": 邮政编码
"country": 国家
 <div>
    <el-form-item label="用户名称" prop="authUser">
      <el-input v-model="ruleForm.authUser" autocomplete="off" :placeholder="请输入用户名" />
    </el-form-item>
    <el-form-item :label="密码" prop="authPwd">
      <el-input v-model="ruleForm.authPwd" show-password autocomplete="off" placeholder="请输入用密码" />
    </el-form-item>
  </div>

image

不让浏览器自动回填

autocomplete="new-password" 
 <div>
    <el-form-item label="用户名称" prop="authUser">
      <el-input v-model="ruleForm.authUser" autocomplete="off" :placeholder="请输入用户名" />
    </el-form-item>
    <el-form-item :label="密码" prop="authPwd">
      <el-input v-model="ruleForm.authPwd" show-password autocomplete="new-password" placeholder="请输入用密码" />
    </el-form-item>
  </div>

image

posted @ 2026-01-12 20:57  南风晚来晚相识  阅读(18)  评论(0)    收藏  举报