快捷導(dǎo)航

Vue實(shí)現(xiàn)阻止瀏覽器記住密碼功能的三種方法

更新時(shí)間：2023年06月19日 14:54:38 作者：潮汐未見(jiàn)潮落

本文主要介紹了Vue實(shí)現(xiàn)阻止瀏覽器記住密碼功能的三種方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

通常瀏覽器會(huì)主動(dòng)識(shí)別密碼表單，在你登錄成功之后提示保存密碼，密碼保存到瀏覽器的密碼管理器中 ( 如下是谷歌瀏覽器 )

這種行為是瀏覽器的行為，這種操作也是為了方便用戶(hù)的使用

現(xiàn)在的一個(gè)需求是要阻止這個(gè)保存密碼的彈窗提示

實(shí)現(xiàn)方法

查找資料發(fā)現(xiàn)的一些方法：

使用 autocomplete="off"（現(xiàn)代瀏覽器許多都不支持）
使用 autocomplete="new-password"
在真正的賬號(hào)密碼框之前增加相同 name 的 input 框
使用 readonly 屬性，在聚焦時(shí)移除該屬性
初始化 input 框的 type 屬性為 text，聚焦時(shí)修改為 password
使用 type="text"，手動(dòng)替換文本框內(nèi)容為星號(hào) “*” 或者小圓點(diǎn) “●”

可以看到實(shí)現(xiàn)這個(gè)需求有許許多多的方法，但是實(shí)際上確有各種各樣的問(wèn)題，下面是我自己測(cè)試的幾個(gè)方法

方法一

密碼框添加 autocomplete="new-password" 屬性

根 index.html 文件添加 meta 元數(shù)據(jù) (該步驟可以省略)

密碼輸入框

  <el-input
      prefix-icon="el-icon-lock"
      type="password"
      name="xxxx"
      placeholder="密碼"
      v-model="password"
      autocomplete="new-password"
    >
  </el-input>

index.html 文件 (該步驟可以省略)

<!DOCTYPE html>
<html lang="">
  <head>
   .....
    <meta name="autocomplete" content="off"> 
   .......
  </head>
 ......
  <body>
   ........
  </body>
</html>

注意

這種方法可以適配 谷歌瀏覽器、 Edge 、 IE 瀏覽器

不兼容火狐瀏覽器

方法二

新添加兩個(gè)輸入框， type 分別設(shè)置為 text 和 password

設(shè)置 display： none 屬性讓其隱藏

具體代碼

 <div class="login-location">
        <!-- 隱藏的輸入框 -->
        <el-input
          style="display: none"
          type="text"
          name="xxxx"
          autocomplete="off"
        >
        </el-input>
        <el-input
          style="display: none"
          type="password"
          name="xxxx"
          autocomplete="off"
        >
        </el-input>
		<!-- 真實(shí)輸入框 -->
        <el-input
          ref="pass"
          prefix-icon="el-icon-lock"
          @keyup.enter.native="userLogin()"
          v-model="password"
          type="password"
          placeholder="密碼"
          name="xxxx"
        >
        </el-input>
  </div>

注意

這種方法可以適配 谷歌瀏覽器、 Edge 、 IE 瀏覽器

不兼容火狐瀏覽器

方法三

把密碼框的 type 定義為 text ，這樣瀏覽器就無(wú)法正確自動(dòng)識(shí)別密碼

給輸入框綁定事件，每次輸入數(shù)據(jù)觸發(fā)事件，把密碼替換成圓點(diǎn) ●

給輸入框右側(cè) 小眼睛手動(dòng)綁定事件，控制密碼的顯示隱藏

具體代碼

 <div class="login-location">
            <el-input
              prefix-icon="el-icon-lock"
              v-model="pwdCover"
              type="text"
              name="pwd"
              id="pwd"
              placeholder="密碼"
              autocomplete="off"
              @input="setPassword"
              @keyup.enter.native="userLogin()"
            >
              <i
                slot="suffix"
                class="el-icon-view"
                style="margin-top: 10px; margin-right: 10px; font-size: 18px"
                @click="hidePassword"
              ></i>
            </el-input>
     </div>

 // 輸入框輸入事件
setPassword(val) {
      if (this.isShowPassword) {
        this.password = val;
      } else {
        let reg = /[0-9a-zA-Z]/g; // 只允許輸入字母和數(shù)字
        let nDot = /[^●]/g; // 非圓點(diǎn)字符
        let index = -1; // 新輸入的字符位置
        let lastChar = void 0; // 新輸入的字符
        let realArr = this.password.split(""); // 真實(shí)密碼數(shù)組
        let coverArr = val.split(""); // 文本框顯示密碼數(shù)組
        let coverLen = val.length; // 文本框字符串長(zhǎng)度
        let realLen = this.password.length; // 真實(shí)密碼長(zhǎng)度
        // 找到新輸入的字符及位置
        coverArr.forEach((el, idx) => {
          if (nDot.test(el)) {
            index = idx;
            lastChar = el;
          }
        });
        // 判斷輸入的字符是否符合規(guī)范，不符合的話(huà)去掉該字符
        if (lastChar && !reg.test(lastChar)) {
          coverArr.splice(index, 1);
          this.pwdCover = coverArr.join("");
          return;
        }
        if (realLen < coverLen) {
          // 新增字符
          realArr.splice(index, 0, lastChar);
        } else if (coverLen <= realLen && index !== -1) {
          // 替換字符（選取一個(gè)或多個(gè)字符直接替換）
          realArr.splice(index, realLen - (coverLen - 1), lastChar);
        } else {
          // 刪除字符，因?yàn)?val 全是 ● ，沒(méi)有辦法匹配，不知道是從末尾還是中間刪除的字符，刪除了幾個(gè)，不好對(duì) password 處理，所以可以通過(guò)光標(biāo)的位置和 val 的長(zhǎng)度來(lái)判斷
          let pos = document.getElementById("pwd").selectionEnd; // 獲取光標(biāo)位置
          realArr.splice(pos, realLen - coverLen);
        }
        // 將 pwdCover 替換成 ●
        this.pwdCover = val.replace(/\S/g, "●");
        this.password = realArr.join("");
      }
    },
     // 點(diǎn)擊右側(cè)小眼睛控制顯示隱藏
    hidePassword() {
      if (!this.isShowPassword) {
        // console.log("顯示");
        this.isShowPassword = true;
        this.pwdCover = this.password;
      } else {
        // console.log("隱藏");
        this.isShowPassword = false;
        this.pwdCover = this.pwdCover.replace(/\S/g, "●");
      }
    },
     // 登錄的邏輯
      userLogin() {
      if (this.account === "admin" && this.password === "admin") {
        this.loading = true;
        setTimeout(() => {
          this.$router.push({ path: "/main" });
        }, 600);
        this.$message.success("登錄成功");
      }
    }

注意