查找資料

網(wǎng)上查到的一些方法：

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

用到的字段

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

由于 autocomplete='off' 現(xiàn)代瀏覽器已經(jīng)不支持，所以直接放棄了對密碼框設置，直接使用 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' 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的方法，結果都不如人意，但發(fā)現(xiàn)火狐瀏覽器只要最終密碼框里的值為星號 “*” 或者小圓點 “●” 時，就不會提示記住密碼（不知是否正確，可自行測試），于是新增字段 pwdCover 用于關聯(lián)輸入框，實際傳值用 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' placeholder='密碼' autocomplete='new-password'@input='setPassword'></el-input>

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

自信滿滿發(fā)給了項目上的同事，結果翻車了，現(xiàn)場環(huán)境：

操作系統(tǒng)：Windows7、Windows10 瀏覽器：Chrome v74.0.3729.108

我安裝同版本的谷歌瀏覽器之后發(fā)現(xiàn)問題還是沒有出現(xiàn)，而我的操作系統(tǒng)是 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' 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; // 只允許輸入字母和數(shù)字 let nDot = /[^●]/g; // 非圓點字符 let index = -1; // 新輸入的字符位置 let lastChar = void 0; // 新輸入的字符 let realArr = this.password.split(’’); // 真實密碼數(shù)組 let coverArr = val.split(’’); // 文本框顯示密碼數(shù)組 let coverLen = val.length; // 文本框字符串長度 let realLen = this.password.length; // 真實密碼長度 // 找到新輸入的字符及位置 coverArr.forEach((el, idx) => { if(nDot.test(el)) { index = idx; lastChar = el; } }); // 判斷輸入的字符是否符合規(guī)范，不符合的話去掉該字符 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實現(xiàn)禁止瀏覽器記住密碼功能的示例代碼的文章就介紹到這了,更多相關vue 禁止瀏覽器記住密碼內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持好吧啦網(wǎng)！