查詢資料

網上查到的一些方法：

• 使用 autocomplete="off"（現代瀏覽器許多都不支援）
• 使用 autocomplete="new-password"
• 在真正的賬號密碼框之前增加相同 name 的 input 框
• 使用 readonly 屬性，在聚焦時移除該屬性
• 初始化 input 框的 type 屬性為 text，聚焦時修改為 password
• 使用 type="text"，手動替換文字框內容為星號 “*” 或者 小圓點 “●”

實現過程

用到的欄位

data() {
 return {
   username: '',password: '',}
}

由於 autocomplete="off" 現代瀏覽器已經不支援，所以直接放棄了對密碼框設定，直接使用 autocomplete="new-password" ，親測Chrome(v88.0.4324.104)、edge(v88.0.705.56)及火狐(v67)可用，但火狐(v85)還是會提示記住密碼。

<el-input v-model="username" type="text" name="text" placeholder="賬號" autocomplete="off"><i slot="prefix" class="el-input_icon el-icon-user"></i></el-input>

<el-input v-model="password" type="password" name="pwd" id="pwd" placeholder="密碼" autocomplete="new-password"></el-input>

參考：

https://developer.mozilla.org/zh-CN/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#browser_compatibility

在解決火狐高版本提示的過程中，試驗了3/4/5的方法，結果都不如人意，但發現火狐瀏覽器只要最終密碼框裡的值為星號 “*” 或者小圓點 “●” 時，就不會提示記住密碼（不知是否正確，可自行測試），於是新增欄位 pwdCover 用於關聯輸入框，實際傳值用 password。

templete

<el-input v-model="username" type="text" name="text" placeholder="賬號" autocomplete="off"><i slot="prefix" class="el-input_icon el-icon-user"></i></el-input>

<el-input v-model="pwdCover" type="password" name="pwd" id="pwd" placeholder="密碼" autocomplete="new-password"@input="setPassword"></el-input>

script
data() {
 return {
   username: '',pwdCover: '',}
},method: {
 login() {
   this.pwdCover = this.pwdCover.replace(/\S/g,'●');
    // 登入請求，失敗時恢復pwdCover
    this.pwdCover = this.password;
  },setPassword(val) {
   this.password = val;
  }
}

自信滿滿發給了專案上的同事，結果翻車了，現場環境：

• 作業系統：Windows7、Windows10
• 瀏覽器：Chrome v74.0.3729.108

我安裝同版本的谷歌瀏覽器之後發現問題還是沒有出現，而我的作業系統是 Windows10，不知是哪裡出了問題，最終還是選擇了方法6

最終

templete

<el-form-item>
 <el-input v-model="username" type="text" name="text" placeholder="賬號" autocomplete="off"><i slot="prefix" class="el-input_icon el-icon-user"></i></el-input>
</el-form-item>
<el-form-item>
 <el-input v-model="pwdCover" type="text" name="pwd" id="pwd" placeholder="密碼" autocomplete="off" @input="setPassword"><i slot="prefix" class="el-icon-lock"></i></el-input>
</el-form-item>

script

setPassword(val) {
  let reg = /[0-9a-zA-Z]/g; // 只允許輸入字母和數字
  let nDot = /[^●]/g; // 非圓點字元
  let index = -1; // 新輸入的字元位置
  let lastChar = void 0; // 新輸入的字元
  let realArr = this.password.split(''); // 真實密碼陣列
  let coverArr = val.split(''); // 文字框顯示密碼陣列
  let coverLen = val.length; // 文字框字串長度
  let realLen = this.password.length; // 真實密碼長度
  // 找到新輸入的字元及位置
  coverArr.forEach((el,idx) => {
    if(nDot.test(el)) {
      index = idx;
      lastChar = el;
    }
  });
  // 判斷輸入的字元是否符合規範，不符合的話去掉該字元
  if(lastChar && !reg.test(lastChar)) {
    coverArr.splice(index,1);
    this.pwdCover = coverArr.join('');
    return;
  }
  if (realLen < coverLen) {
    // 新增字元
    realArr.splice(index,lastChar);
  } else if (coverLen <= realLen && index !== -1) {
    // 替換字元（選取一個或多個字元直接替換）
    realArr.splice(index,realLen - (coverLen - 1),lastChar);
  } else {
    // 刪除字元，因為 val 全是 ● ，沒有辦法匹配，不知道是從末尾還是中間刪除的字元，刪除了幾個，不好對 password 處理，所以可以通過游標的位置和 val 的長度來判斷
    let pos = document.getElementById('pwd').selectionEnd; // 獲取游標位置
    realArr.splice(pos,realLen - coverLen);
  }
  // 將 pwdCover 替換成 ●
  this.pwdCover = val.replace(/\S/g,'●');
  this.password = realArr.join('');
},

到此這篇關於vue實現禁止瀏覽器記住密碼功能的示例程式碼的文章就介紹到這了,更多相關vue 禁止瀏覽器記住密碼內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！