vue實現禁止瀏覽器記住密碼功能的示例代碼
查找資料
網上查到的一些方法:
- 使用 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: '', password: '', 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, 0, 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 禁止瀏覽器記住密碼內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- vue+elementui實現動態添加行/可編輯的table
- thymeleaf實現前後端數據交換的示例詳解
- Vue input輸入框中的值如何變成黑點問題
- vue之Element-Ui輸入框顯示與隱藏方式
- vue 監聽input輸入事件(oninput)的示例代碼支持模糊查詢