解决浏览器密码框自带记忆的问题

工作中我们经常遇到在修改密码以及type='password'的input框中浏览器会唤起联想记忆！（如下图）

 解决方法：

将其设置成text文本框，通过样式修改其不呈现明文

<template>      
<el-form-item label="旧密码" prop="oldPassword">
        <el-input
    // 重点是此属性autocomplete
          autocomplete="new-password"
          ref="inputss"
          class="passwordInput"
          v-model.trim="oldPassword"
        />
      </el-form-item>
</template>







<style lang="scss">
.passwordInput {
  -webkit-text-security: disc !important;
/*此属性尤为重要 */
  text-security: disc !important;
/*写了这个火狐的前缀也没用，火狐不支持此属性 */
  /* -moz-text-security: disc !important; */
  font-family: text-security-disc !important;
  ime-mode: disabled;
}
</style>

什么？？？你还想兼容火狐。你咋不上天呢？？   

往下看

兼容火狐只能通过JS自己整了（重新定义一个变量记忆输入的值，双向绑定的值替换成*号）

    
<template>
  <el-form-item label="旧密码" prop="oldPassword">
        <el-input
          autocomplete="new-password"
          ref="inputss"
          class="passwordInput"
          v-model.trim="oldPassword"
        />
      </el-form-item>
</template>

<script>

export default {

  data() {
   
    return {
      form: {
        oldPassword: "",
      },
      oldPassword: "",
 
    };
  },
//监听input
  watch: {
    oldPassword(newValue, oldValue) {
      this.inputjiyi(newValue, oldValue, "oldPassword");
    },
   
  },
//此方法可以解决剪贴等问题，唯一粘贴的问题未解决才出此下策（禁止粘贴），如有大神有更好的办法请留 
 // 下您的宝贵意见！
  mounted() {
    // const input = document.getElementById('');
    // 禁止粘贴
    document.addEventListener("paste", function (e) {
      if (e.target.autocomplete == "new-password" || !e.target.autocomplete) {
        e.preventDefault();
      } else {
        return true;
      }
    });
  },

  methods: {
    // newValue input框最新的值
    // oldValue input框旧的值
    // proxy   对应form表单的值（（提交后台的数据为form中的）


    inputjiyi(newValue, oldValue, proxy) {
      // 增加
      if (newValue.length > oldValue.length) {
        // 判断是否是粘贴过来的

        //  赋值星号
        let a = this.xing(newValue.length);
        this[proxy] = a;
        //  赋值密码
        this.form[proxy] += newValue.slice(-1);
      } else if (newValue.length < oldValue.length) {
        // 删除
        this[proxy] = this[proxy].substring(0, this[proxy].length);
        this.form[proxy] = this.form[proxy].substring(0, this[proxy].length);
      }
      // 解决输入汉字的问题
      if (/[\u4e00-\u9fa5]|(^\s+)|(\s+$)/gi.test(newValue)) {
        //  赋值密码
        this.form.oldPassword = this.form.oldPassword.slice(
          0,
          this.form.oldPassword.length - 1
        );
      }
      console.log(this.form.oldPassword);
    },



    // 造*函数
    xing(ww) {
      let xing = "";
      for (let i = 0; i < ww; i++) {
        xing += "*";
      }
      return xing;
    },

    
  },
};
</script>