autocomplete="off"，失效禁止浏览器默认填充的解决方案总结

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_28004379/article/details/90609125

现象：浏览器有自动记住密码的功能，当场景是注册账号等表单的时候会自动填充~

默认的解决方案：在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;
}