VUE+TS解决修改密码时获取焦点弹出浏览器记住的用户名密码列表问题

前提： 后台系统修改密码框，获取焦点会自动弹出登录时浏览器记住的用户名和密码选项，以下是禁止弹出选项框的解决方法

　　

（1）第一种

type="password" 改为text　　

<a-form-model-item  prop="passWord">

  <a-input v-model="loginForm.passWord" type="text" :maxLength="16" autocomplete="new-password" class="password"/>

</a-form-model-item>

 

添加样式

.password {

   text-security:disc;

   -webkit-text-security:disc;

   -mox-text-security:disc;

}

 

（2）第二种

HTML部分

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">

        <el-form-item label="原始密码" prop="oldPassword">

        　　<el-input v-model="ruleForm.oldPassword" :type="((newPwdReadOnly && ruleForm.oldPassword) || ruleForm.oldPassword)?'password':'text'" auto-complete="new-password" name="person.user.new_password" @focus="newPwdF　　　　　　ocus($event, 'oldPassword')" :readonly="newPwdReadOnly" @blur="newPwdBlur($event)" ref="oldPassword"></el-input>

        </el-form-item>

        <el-form-item label="输入新密码" prop="newPassword">

          <el-input v-model="ruleForm.newPassword" :type="((rePwdReadOnly && ruleForm.newPassword) || ruleForm.newPassword)?'password':'text'" auto-complete="confirm-password" name="person.user.re_password" @focus="newPwdFocus($event, 'newPassword')" :readonly="rePwdReadOnly" @blur="newPwdBlur($event)" ref="newPassword"></el-input>

        </el-form-item>

        <el-form-item label="重复新密码" prop="newPasswordRep">

          <el-input v-model="ruleForm.newPasswordRep" :type="((rePwdReadOnlyREP && ruleForm.newPasswordRep) || ruleForm.newPasswordRep)?'password':'text'" auto-complete="confirm-password" name="person.user.re_password" @focus="newPwdFocus($event, 'newPasswordRep')" :readonly="rePwdReadOnlyREP" @blur="newPwdBlur($event)" ref="newPasswordRep"></el-input>

        </el-form-item>

 </el-form>

javascript部分
private newPwdReadOnly: any = false;
private rePwdReadOnly: any = false;
private rePwdReadOnlyREP: any = false;
private ruleForm: any = {
    newPassword: '',
    newPasswordRep: '',
    oldPassword: '',
    userName: '', // 当前登录的用户名
};
// 获取焦点
private newPwdFocus(evt: any, isNew?: any) {
    if (evt) {
      evt.stopPropagation();
      evt.preventDefault();
    }
    setTimeout(() => {
      if (isNew === 'oldPassword') {
        this.newPwdReadOnly = false;
        this.rePwdReadOnly = true;
        this.rePwdReadOnlyREP = true;
      } else if (isNew === 'newPassword') {
        this.newPwdReadOnly = true;
        this.rePwdReadOnly = false;
        this.rePwdReadOnlyREP = true;
      } else if (isNew === 'newPasswordRep') {
        this.newPwdReadOnly = true;
        this.rePwdReadOnly = true;
        this.rePwdReadOnlyREP = false;
      } else {
        return;
      }
    }, 100);
}
// 失去焦点
private newPwdBlur(evt: any, isNew?: any) {
    if (evt) {
      evt.stopPropagation();
    }
    this.newPwdReadOnly = true;
    this.rePwdReadOnly = true;
    this.rePwdReadOnlyREP = true;
  }
　// 监听每个表单值
  @Watch('ruleForm.oldPassword')
  private oldPasswordss() {
    if (this.ruleForm.oldPassword === '') {
      this.newPwdReadOnly = true;
      this.newPwdFocus(null);
    }
  }

  @Watch('ruleForm.newPassword')
  private newPasswordsss() {
    if (this.ruleForm.newPassword === '') {
      this.rePwdReadOnly = true;
      this.newPwdFocus(null);
    }
  }

  @Watch('ruleForm.newPasswordRep')
  private newPasswordRepss() {
    if (this.ruleForm.newPasswordRep === '') {
      this.rePwdReadOnlyREP = true;
      this.newPwdFocus(null);
    }
  }
// 进入页面绑定事件（mounted执行）
 private addClickEvt() {
    const refs: any = this.$refs;
    if (refs.oldPassword) {
      refs.oldPassword.$refs.input.onmousedown.native =  (evt: any) => {
        if (evt) {
          evt.preventDefault();
          evt.stopPropagation();
        }
        if (this.ruleForm.oldPassword === '' || this.newPwdReadOnly) {
          refs.oldPassword.$refs.input.blur();
          setTimeout(() => {
            refs.oldPassword.$refs.input.focus();
          }, 0);
        }
        return false;
      };
    }
    if (refs.newPassword) {
      refs.newPassword.$refs.input.onmousedown.native =  (evt: any) => {
        if (evt) {
          evt.preventDefault();
          evt.stopPropagation();
        }
        if (this.ruleForm.newPassword === '' || this.rePwdReadOnly) {
          refs.newPassword.$refs.input.blur();
          setTimeout(() => {
            refs.newPassword.$refs.input.focus();
          }, 0);
        }
        return false;
      };
    }
    if (refs.newPasswordRep) {
      refs.newPasswordRep.$refs.input.onmousedown.native =  (evt: any) => {
        if (evt) {
          evt.preventDefault();
          evt.stopPropagation();
        }
        if (this.ruleForm.newPasswordRep === '' || this.rePwdReadOnly) {
          refs.newPasswordRep.$refs.input.blur();
          setTimeout(() => {
            refs.newPasswordRep.$refs.input.focus();
          }, 0);
        }
        return false;
      };
    }
  }