vue element input如何讓瀏覽器不保存密碼

更新時間：2024年03月18日 15:31:35 作者：niesiyuan000

這篇文章主要介紹了vue element input如何讓瀏覽器不保存密碼問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue element input讓瀏覽器不保存密碼

從網(wǎng)上看了很多：

比如 auto-complete="new-password"
比如 autocomplete="off"

這是真的用不了啊，最后用css可以實現(xiàn)

1、html

<div class="miyaoWrap pr mt10">
  <el-input v-model="reach__vioSecretkey" :class="!reach__seePwd ? 'no-autofill-pwd' : ''" placeholder="請輸入密鑰" auto-complete="new-password" autocomplete="off" />
  <i class="el-icon-view" @click="seePwd()" />
</div>

2、data

reach__vioSecretkey: '', // 違紀(jì)秘鑰
reach__seePwd: false,

3、methods

seePwd() {
  this.reach__seePwd = !this.reach__seePwd
},

4、css

.miyaoWrap{
  .no-autofill-pwd {
    ::v-deep .el-input__inner {
      -webkit-text-security: disc !important;
    }
  }
  .el-icon-view {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
}

禁止瀏覽器記住密碼和自動填充 element-ui+vue

vue根據(jù)element-ui 自定義密碼輸入框

防止瀏覽器記住密碼和自動填充

 <template>
  <div
    class="el-password el-input"
    :class="[size ? 'el-input--' + size : '', { 'is-disabled': disabled }]"
  >
    <input
      class="el-input__inner"
      :placeholder="placeholder"
      ref="input"
      :style="{ paddingRight: padding + 'px' }"
      :disabled="disabled"
      :readonly="readonly"
      @focus="handleFocus"
      @blur="handleBlur"
      @input="handleInput"
      @change="change"
      @compositionstart="handleCompositionStart"
      @compositionend="handleCompositionEnd"
    />
    <div class="tools">
      <i
        v-if="clearable !== false"
        v-show="pwd !== '' && isfocus"
        @mousedown.prevent
        class="el-input__icon el-icon-circle-close el-input__clear"
        @click="clearValue"
      ></i>
      <i
        v-if="showPassword !== false"
        v-show="pwd !== '' || isfocus"
        class="el-input__icon el-icon-view el-input__clear"
        @click="changePasswordShow"
      ></i>
    </div>
  </div>
</template>

<script>
import emitter from "element-ui/src/mixins/emitter";
//自定義密碼輸入框//input元素光標(biāo)操作
class CursorPosition {
  constructor(_inputEl) {
    this._inputEl = _inputEl;
  }
  //獲取光標(biāo)的位置 前，后，以及中間字符
  get() {
    var rangeData = { text: "", start: 0, end: 0 };
    if (this._inputEl.setSelectionRange) {
      // W3C
      this._inputEl.focus();
      rangeData.start = this._inputEl.selectionStart;
      rangeData.end = this._inputEl.selectionEnd;
      rangeData.text =
        rangeData.start != rangeData.end
          ? this._inputEl.value.substring(rangeData.start, rangeData.end)
          : "";
    } else if (document.selection) {
      // IE
      this._inputEl.focus();
      var i,
        oS = document.selection.createRange(),
        oR = document.body.createTextRange();
      oR.moveToElementText(this._inputEl);
      rangeData.text = oS.text;
      rangeData.bookmark = oS.getBookmark();
      for (
        i = 0;
        oR.compareEndPoints("StartToStart", oS) < 0 &&
        oS.moveStart("character", -1) !== 0;
        i++
      ) {
        if (this._inputEl.value.charAt(i) == "\r") {
          i++;
        }
      }
      rangeData.start = i;
      rangeData.end = rangeData.text.length + rangeData.start;
    }
    return rangeData;
  }
  //寫入光標(biāo)的位置
  set(rangeData) {
    var oR;
    if (!rangeData) {
      console.warn("You must get cursor position first.");
    }
    this._inputEl.focus();
    if (this._inputEl.setSelectionRange) {
      //  W3C
      this._inputEl.setSelectionRange(rangeData.start, rangeData.end);
    } else if (this._inputEl.createTextRange) {
      // IE
      oR = this._inputEl.createTextRange();
      if (this._inputEl.value.length === rangeData.start) {
        oR.collapse(false);
        oR.select();
      } else {
        oR.moveToBookmark(rangeData.bookmark);
        oR.select();
      }
    }
  }
}
export default {
  name: "el-password",
  props: {
    value: { default: "" },
    size: { type: String, default: "" },
    placeholder: { type: String, default: "請輸入" },
    disabled: { type: [Boolean, String], default: false },
    readonly: { type: [Boolean, String], default: false },
    clearable: { type: [Boolean, String], default: false },
    showPassword: { type: [Boolean, String], default: false },
  },
  data() {
    return {
      symbol: "●", //自定義的密碼符號
      pwd: "", //密碼明文數(shù)據(jù)
      padding: 15,
      show: false,
      isfocus: false,
      inputEl: null, //input元素
      isComposing: false, //輸入框是否還在輸入（記錄輸入框輸入的是虛擬文本還是已確定文本）
    };
  },
  mounted() {
    this.inputEl = this.$refs.input;
    this.pwd = this.value;
    this.inputDataConversion(this.pwd);
  },
  mixins: [emitter],
  watch: {
    value: {
      handler: function (value) {
        if (this.inputEl) {
          this.pwd = value;
          this.inputDataConversion(this.pwd);
        }
      },
    },
    showPassword: {
      handler: function (value) {
        let padding = 15;
        if (value) {
          padding += 18;
        }
        if (this.clearable) {
          padding += 18;
        }
        this.padding = padding;
      },
      immediate: true,
    },
    clearable: {
      handler: function (value) {
        let padding = 15;
        if (value) {
          padding += 18;
        }
        if (this.showPassword) {
          padding += 18;
        }
        this.padding = padding;
      },
      immediate: true,
    },
  },
  methods: {
    select() {
      this.$refs.input.select();
    },
    focus() {
      this.$refs.input.focus();
    },
    blur() {
      this.$refs.input.blur();
    },
    handleFocus(event) {
      this.isfocus = true;
      this.$emit("focus", event);
    },
    handleBlur(event) {
      this.isfocus = false;
      this.$emit("blur", event);
      //校驗表單
      this.dispatch("ElFormItem", "el.form.blur", [this.value]);
    },
    change(...args) {
      this.$emit("change", ...args);
    },
    clearValue() {
      this.pwd = "";
      this.inputEl.value = "";
      this.$emit("input", "");
      this.$emit("change", "");
      this.$emit("clear");
      this.$refs.input.focus();
    },
    changePasswordShow() {
      this.show = !this.show;
      this.inputDataConversion(this.pwd);
      this.$refs.input.focus();
    },
    inputDataConversion(value) {
      //輸入框里的數(shù)據(jù)轉(zhuǎn)換，將123轉(zhuǎn)為●●●
      if (!value) {
        this.inputEl.value = "";
        return;
      }
      let data = "";
      for (let i = 0; i < value.length; i++) {
        data += this.symbol;
      }
      //使用元素的dataset屬性來存儲和訪問自定義數(shù)據(jù)-*屬性 (存儲轉(zhuǎn)換前數(shù)據(jù))
      this.inputEl.dataset.value=  this.pwd;
      this.inputEl.value = this.show ? this.pwd : data;
    },
    pwdSetData(positionIndex, value) {
      //寫入原始數(shù)據(jù)
      let _pwd = value.split(this.symbol).join("");
      if (_pwd) {
        let index = this.pwd.length - (value.length - positionIndex.end);
        this.pwd =
          this.pwd.slice(0, positionIndex.end - _pwd.length) +
          _pwd +
          this.pwd.slice(index);
      } else {
        this.pwd =
          this.pwd.slice(0, positionIndex.end) +
          this.pwd.slice(positionIndex.end + this.pwd.length - value.length);
      }
    },
    handleInput(e) {
      //輸入值變化后執(zhí)行 //撰寫期間不應(yīng)發(fā)出輸入
      if (this.isComposing) return;
      let cursorPosition = new CursorPosition(this.inputEl);
      let positionIndex = cursorPosition.get();
      let value = e.target.value;
      //整個輸入框的值
      if (this.show) {
        this.pwd = value;
      } else {
        this.pwdSetData(positionIndex, value);
        this.inputDataConversion(value);
      }
      cursorPosition.set(positionIndex, this.inputEl);
      this.$emit("input", this.pwd);
    },
    handleCompositionStart() {
      //表示正在寫
      this.isComposing = true;
    },
    handleCompositionEnd(e) {
      if (this.isComposing) {
        this.isComposing = false;
        //handleCompositionEnd比handleInput后執(zhí)行，避免isComposing還為true時handleInput無法執(zhí)行正確邏輯
        this.handleInput(e);
      }
    },
  },
};
</script>

<style scoped>
.tools {
  position: absolute;
  right: 5px;
  display: flex;
  align-items: center;
  top: 0;
  height: 100%;
  z-index: 1;
}
</style>

引用組件

<template>
  <div>
    <el-form
      style="width: 320px; margin: 50px auto"
      :model="fromData"
      ref="elfrom"
      :rules="rules"
    >
      <el-form-item label="密碼" prop="password">
        <el-password
          size="small"
          v-model="fromData.password"
          show-password
          placeholder="請輸入密碼"
        >
        </el-password>
      </el-form-item>
      <el-form-item label="確認(rèn)密碼" prop="confirmPassword">
        <el-password
          size="small"
          v-model="fromData.confirmPassword"
          show-password
          placeholder="請再次輸入密碼"
        >
        </el-password>
      </el-form-item>
    </el-form>
    <br />
  </div>
</template>

<script>
import elPassword from "./el-password.vue";
export default {
  data() {
    return {
      fromData: {
        password: "",
        confirmPassword: "",
      },
      rules: {
        password: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("請輸入密碼"));
              } else if (
                /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[^a-zA-Z0-9]).{10,20}$/.test(
                  value
                ) === true
              ) {
                callback();
              } else {
                callback(
                  new Error("密碼范圍在10~20位之間！須包含字母數(shù)字特殊符號")
                );
              }
            },
            trigger: "blur",
          },
        ],
        confirmPassword: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("請輸入確認(rèn)密碼"));
              } else if (value != this.fromData.password) {
                callback(new Error("二次密碼不一致"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  components: {
    elPassword,
  },
};
</script>

效果圖