elementUI——input輸入框，設置autocomplete="off"無效問題

參考：'autocomplete="off"'在Chrome中不起作用解決方案_小記心得-CSDN博客_autocomplete不起作用

　　autocomplete="off"，失效禁止瀏覽器默認填充的解決方案總結_簡單Cere-CSDN博客_autocomplete readonly

 

我的情況：

使用element-ui的el-input，發現輸入框的占位符placeholder對“姓名”這類文字敏感，會自動填充，設置autocomplete="off"無效。

 

原因：

 

 

解決方法：

設置autocomplete為非"on"/"off"的值即可，如設置為"new"也可。（但這種可能存在兼容性問題 ）

 

兼容的解決方法：

使用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;
}