版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
现象:浏览器有自动记住密码的功能,当场景是注册账号等表单的时候会自动填充~
默认的解决方案:在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;
}