禁用 element 中v-input 自動填充

ziming007發表於2020-12-17

在修改密碼功能中,禁用瀏覽器的v-input的自動填充功能
正常情況如下:

禁用 element 中v-input 自動填充

我們在element官網檢視是否有對應的解決辦法.進入input模組,屬性列表中果然有對應的屬性設定:

禁用 element 中v-input 自動填充

上面一個屬性是針對原有的input輸入框,下面是v-input輸入框使用的屬性.
此時我們發現其預設值就是 off,即禁用自動補全.此時問題就出現了: 明明預設設定的就是禁用,怎麼還會出現這個密碼輸入提示框呢?

首先,我們請出度娘,看看網路上的大佬們有什麼解決辦法.
最後整理出以下解決方案:
1.設定自動填充屬性:

auto-complete="new-password"

2.在v-input框前面新增一個重複的v-input框,隨後設定z-index 與 display:none 將其隱藏

一一嘗試後,以上方法在我這裡都沒有作用.

然而,結果至上.我們的需求是不需要這個密碼自動填充提示框.這時就可以換一個解決的思路了:在試錯中,可以發現將v-input的type屬性均設定為text時,不會有該提示框.此時,我們這裡只需要將其填寫的密碼處理成密文格式即可.

我們可以在css相關網站(css-infos.net/property/-webkit-text... ) 中找到進行處理內容的屬性

禁用 element 中v-input 自動填充
隨後,我們測試一下效果如何:
HTML:

<el-input v-model="original_pass" class="no-autofill-pwd" type="text" />

CSS:

.no-autofill-pwd {
  /deep/ .el-input__inner {
    -webkit-text-security: disc !important;
  }
}

執行結果:

禁用 element 中v-input 自動填充

至此,禁用 element 中v-input 自動填充需求實現完畢.

有時候敲程式碼最重要的就是思路.但是,遺憾的是這個輸入框自動填充的根本原因並沒有找到,如果有知道的大佬歡迎在評論區一起分析分析 ^-^

以上.

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章