使用vue怎么禁止瀏覽器記住密碼？相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

創(chuàng)新互聯(lián)長(zhǎng)期為數(shù)千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為孝義企業(yè)提供專(zhuān)業(yè)的成都網(wǎng)站建設(shè)、成都網(wǎng)站制作，孝義網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

實(shí)現(xiàn)過(guò)程

用到的字段

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

由于 autocomplete="off" 現(xiàn)代瀏覽器已經(jīng)不支持，所以直接放棄了對(duì)密碼框設(shè)置，直接使用 autocomplete="new-password" ，親測(cè)Chrome(v88.0.4324.104)、edge(v88.0.705.56)及火狐(v67)可用，但火狐(v85)還是會(huì)提示記住密碼。

<el-input v-model="username" type="text" name="text" placeholder="賬號(hào)" 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>

在解決火狐高版本提示的過(guò)程中，試驗(yàn)了3/4/5的方法，結(jié)果都不如人意，但發(fā)現(xiàn)火狐瀏覽器只要最終密碼框里的值為星號(hào) “*” 或者小圓點(diǎn) “●” 時(shí)，就不會(huì)提示記住密碼（不知是否正確，可自行測(cè)試），于是新增字段 pwdCover 用于關(guān)聯(lián)輸入框，實(shí)際傳值用 password。

templete

<el-input v-model="username" type="text" name="text" placeholder="賬號(hào)" 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, '●');
    // 登錄請(qǐng)求，失敗時(shí)恢復(fù)pwdCover
    this.pwdCover = this.password;
  },
  setPassword(val) {
   this.password = val;
  }
}

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

• 操作系統(tǒng)：Windows7、Windows10

• 瀏覽器：Chrome v74.0.3729.108

我安裝同版本的谷歌瀏覽器之后發(fā)現(xiàn)問(wèn)題還是沒(méi)有出現(xiàn)，而我的操作系統(tǒng)是 Windows10，不知是哪里出了問(wèn)題，最終還是選擇了方法6

最終

templete

<el-form-item>
 <el-input v-model="username" type="text" name="text" placeholder="賬號(hào)" 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; // 只允許輸入字母和數(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ī)范，不符合的話去掉該字符
  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)?nbsp;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('');
},

看完上述內(nèi)容，你們掌握使用vue怎么禁止瀏覽器記住密碼的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

新聞標(biāo)題：使用vue怎么禁止瀏覽器記住密碼-創(chuàng)新互聯(lián)
轉(zhuǎn)載源于：http://www.chinadenli.net/article2/dccsic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、面包屑導(dǎo)航、微信小程序、云服務(wù)器、響應(yīng)式網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)