vue2阻止浏览器记住密码(星号密码框封装)

151 阅读1分钟

需求:工厂可能存在多用户使用一台电脑,避免电脑记住密码,其他人使用时选择自动填充,登陆别人账号

不需要兼容火狐可直接采用

 autocomplete="new-password"

其他:通过输入框监听用户输入字符自动替换为*

<template>
  <div>
    <input
      ref="pwd"
      type="text"
      auto-complete="off"
      placeholder="请输入登录密码"
      onkeyup="this.value=this.value.replace(/./g,'•');"
      @keyup.enter.native="handleLogin"
      @keydown="onkeydown"
      @input="onInput($event)"     
    />
  </div>
</template>

<script>
export default {
  name: "pwdInput",
  data() {
    return {
      strPwd: "",
    };
  },
  methods: {
    onInput(event) {
      if (/[\u4e00-\u9fa5]/.test(event.data)) {
        this.$message.error("密码不能包含中文,请切换至英文输入法。");
      }
      if (event.data) {
        this.strPwd += event.data;
      } else {
        this.strPwd =
          this.strPwd.length == 1
            ? ""
            : this.strPwd.substr(0, this.strPwd.length - 1);
        //1.全部选择移除在输入
        if (this.$refs.pwd.value.length === 0) {
          this.strPwd = "";
        }
      }
      //2全部选择不移除直接输入
      if (this.strPwd.length > this.$refs.pwd.value.length) {
        this.strPwd = event.data;
      }
      // 传递真实密码
      this.$emit("inputBack", this.strPwd);
    },
    onkeydown(event) {
      if (event.keyCode == "13") {
        this.$emit("onkeydown");
      }
    },
  },
};
</script>