快捷導(dǎo)航

el-input 密碼自動填充的方法匯總

更新時(shí)間：2024年08月15日 11:06:08 作者：Wu Youlu

在開發(fā) Web 應(yīng)用時(shí),通常需要避免瀏覽器自動填充密碼,以下是一些可行的解決方案,特別針對使用 Element UI 框架的 el-input 組件,下面給大家分享el-input 密碼自動填充的方法,感興趣的朋友跟隨小編一起看看吧

避免 el-input 密碼自動填充的實(shí)用方法

在開發(fā) Web 應(yīng)用時(shí)，通常需要避免瀏覽器自動填充密碼。以下是一些可行的解決方案，特別針對使用 Element UI 框架的 el-input 組件。

方法 1：設(shè)置隨機(jī)的 name 和 autocomplete 屬性

瀏覽器根據(jù) name 屬性來識別輸入字段的類型，因此可以使用隨機(jī)的 name 屬性，并將 autocomplete 設(shè)置為 new-password。

實(shí)現(xiàn)

<el-input
  type="password"
  :name="randomName"
  autocomplete="new-password"
  v-model="password">
</el-input>

export default {
  data() {
    return {
      password: '',
      randomName: `password_${Math.random().toString(36).substr(2, 9)}`
    };
  }
}

方法 2：使用隱藏的密碼輸入字段

通過在頁面中添加一個(gè)隱藏的輸入字段，可以避免自動填充密碼字段。

實(shí)現(xiàn)

<el-input
  type="text"
  style="display: none;"
  autocomplete="username">
</el-input>
<el-input
  type="password"
  autocomplete="new-password"
  v-model="password">
</el-input>

方法 3：使用 meta 標(biāo)簽阻止密碼管理器

在 HTML 中添加以下 meta 標(biāo)簽，可能會阻止某些密碼管理器的自動填充功能。

實(shí)現(xiàn)

<meta name="disable-autofill" content="on">

方法 4：事件攔截

通過監(jiān)聽輸入事件，可以在獲取焦點(diǎn)時(shí)手動清除輸入字段的內(nèi)容。

實(shí)現(xiàn)

methods: {
  clearInput(event) {
    event.target.value = '';
  }
}

<el-input
  type="password"
  autocomplete="new-password"
  @focus="clearInput"
  v-model="password">
</el-input>

方法 5：動態(tài)改變 readonly 屬性

通過設(shè)置 readonly 屬性為true，可以避免一開始自動填充，在 mousedown 或 focus 事件觸發(fā)時(shí)設(shè)置為 false ,允許輸入

實(shí)現(xiàn)

          <el-input
            placeholder="密碼"
            type="password"
            v-model="loginForm.userPwd"
            show-password
            @focus="passwordMousedownFun"
            @input="passwordInputFun"
            @mousedown.native="passwordMousedownFun"
            :readonly="passwordReadonly"
            id="passwordRef"
          >
      loginForm: {
        userName: "",
        userPwd: "",
        userRember: false,
      },
      passwordReadonly: true,
  watch: {
    loginForm: {
      handler: function (newValue, oldValue) {
        if (newValue.userPwd == "") {
          this.passwordReadonly = true;
          setTimeout(() => {
            this.passwordReadonly = false;
          }, 0);
        }
      },
      deep: true,
    },
  },
    passwordMousedownFun() {
      if (this.loginForm.userPwd === "") {
        this.passwordReadonly = true;
      } else {
        if (this.loginForm.userPwd == this.originPwd) {
          this.loginForm.userPwd = "";
        }
      }
      setTimeout(() => {
        this.passwordReadonly = false;
      }, 0);
    },

到此這篇關(guān)于el-input 密碼自動填充的實(shí)用方法的文章就介紹到這了,更多相關(guān)el-input自動填充內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: