autocomplete="off"，失效禁止瀏覽器默認填充的解決方案總結

現象：瀏覽器有自動記住密碼的功能，當場景是註冊賬號等表單的時候會自動填充~

默認的解決方案：在form與input上添加autocomplete=“off”，但是在很多瀏覽器上不起作用。

 

其他方案：

1.對自動填充的input設置name和id，結果效果不明顯 （X）

2.將autocomplete設置爲new-password，這種效果只支持谷歌瀏覽器，其他瀏覽器就不行了 （X）

 

最後兼容不錯的小方法，使用readonly和foucs聯合搭配，當瀏覽打開頁面只讀，當鼠標聚焦到文本框的時候給它放開 （✔）

<el-form-item label="用戶名：" >
          <el-input type="text" :readonly="readonlyInput" @focus="cancelReadOnly()"  v-model="params.username" placeholder="請輸入用戶名" ></el-input>
</el-form-item>
<el-form-item label="密碼：">
          <el-input :readonly="readonlyInput" @focus="cancelReadOnly()"  type="password" placeholder="請輸入密碼" ></el-input>
</el-form-item>

readonlyInput: true,


cancelReadOnly() {
    this.readonlyInput= false;
}