快捷導(dǎo)航

el-input 密碼自動(dòng)填充的方法匯總

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

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

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

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

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

瀏覽器根據(jù) name 屬性來(lái)識(shí)別輸入字段的類型，因此可以使用隨機(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：使用隱藏的密碼輸入字段

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

實(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)簽，可能會(huì)阻止某些密碼管理器的自動(dòng)填充功能。

實(shí)現(xiàn)

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

方法 4：事件攔截

通過(guò)監(jiān)聽(tīng)輸入事件，可以在獲取焦點(diǎn)時(shí)手動(dòng)清除輸入字段的內(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：動(dòng)態(tài)改變 readonly 屬性

通過(guò)設(shè)置 readonly 屬性為true，可以避免一開(kāi)始自動(dòng)填充，在 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 密碼自動(dòng)填充的實(shí)用方法的文章就介紹到這了,更多相關(guān)el-input自動(dòng)填充內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: