vue 登陆禁止弹出保存密码框及禁止默认填充密码

最新推荐文章于 2024-06-03 14:09:24 发布

从南慕白

最新推荐文章于 2024-06-03 14:09:24 发布

阅读量952

点赞数 6

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_43030908/article/details/135524105

版权

文章讲述了在Vue项目中，如何通过`el-input`组件结合`:focus`事件和`-webkit-text-security`属性，实现在密码输入框聚焦时去除`readonly`属性以允许输入，同时控制浏览器的自动填充行为。

摘要由CSDN通过智能技术生成

在这里插入图片描述

οnfοcus=“this.removeAttribute(‘readonly’);” readonly
初始化为只读，当聚焦时去掉只读属性，只读可以防止浏览器自动填充。

-webkit-text-security：指定要使用的形状来代替文字的显示
none 无。
circle 圆圈。
disc 圆形。
square 正方形。

<el-form-item prop="password">
   <el-input
     :key="passwordType"
     ref="password"
     :type="passwordType"
     v-model="loginForm.password"
     placeholder="请输入密码"
     no-autocomplete
     name="password"
     tabindex="2"
     auto-complete="off"
     readonly
     onfocus="this.removeAttribute('readonly');"
     :class="pwdClass==true?'no-autofill-pwd':'no-auto2'"
     clearable
   />
   <span class="show-pwd" @click="showPwd">
     <svg-icon
       :icon-class="passwordType === 'text' ? 'eye' : 'eye-open'"
     />
   </span>
 </el-form-item>

data(){
	return{
      passwordType: "text",
      pwdClass:true,
	}
},
methods:{
	showPwd() {
      if (this.passwordType === "text") {
        this.passwordType = "";
        this.pwdClass = false
      } else {
        this.pwdClass = true
        this.passwordType = "text";
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
}


.show-pwd {
  position: absolute;
  right: 10px;
  top: 3px;
  font-size: 16px;
  color: #138a7a;
  cursor: pointer;
  user-select: none;
}
.no-autofill-pwd {
  -webkit-text-security: disc !important;
}
.no-auto2 {
  -webkit-text-security: none !important;
}