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