input的type="password"时,会出现图中现象,之前保存的用户名和密码回显出来
在这里插入图片描述
1.为了解决这个问题尝试过以下几种方法:

  • autocomplete=“off”
  • autocomplete=“new-password”
  • 在input之前再写一个input 隐藏起来
    但是发现这三个方法都没什么效果
  1. 思考灵魂所在:

    密码框会回显之前保存的账户,是因为设置了type=“password”,所以我们只需要改变text类型即可

// 这里用的是vuetify 框架
<v-text-field
    v-model="form.pwd"
    :rules="pwdRules"
     :label="form.pwd.title"
     :append-icon="show1 ? 'visibility' : 'visibility_off'"
     type="text"
     @click:append="show1 = !show1,setPwdType('pwd',show1,form.pwd)"
     id="pwd"
 >
 </v-text-field>

// 监听数据,有变化就调用setPwdType方法
 watch:{
    'form.pwd': function(val){
      this.setPwdType('pwd',this.show1,val)
    },
methods:{
    // 设置密码框的类型,防止浏览器保存的密码回显
    setPwdType(id,show,val){
      let len = val?val.length : 0
      if(!show && len){
        document.getElementById(id).setAttribute('type','password');
      }else{
        document.getElementById(id).setAttribute('type','text');
      }
    },
  }
Logo

前往低代码交流专区

更多推荐