文章目录

刷新网页的时候浏览器会自动填充用户名和密码刷新之后效果图解决方案完整的login.vue代码核心代码原理(添加 readonly 和监听 focus 事件)

刷新网页的时候浏览器会自动填充用户名和密码

刷新之后效果图

解决方案

完整的login.vue代码

核心代码原理(添加 readonly 和监听 focus 事件)

用户名和密码字段即使没有赋值也出现浏览器自动填充的情况，可以采用以下方法来禁止这一行为：

使用 auto-complete 属性(实测并没有生效)： 对于 el-input 组件，你应该将 auto-complete 属性设置为 "new-password"，即使对于非密码字段也是如此，因为某些浏览器可能对常见的字段名有所识别并尝试自动填充。例如：

添加 readonly 和监听 focus 事件 (实测有效)： 初始时设置输入框为只读（readonly），并在获得焦点时移除只读属性，这可以阻止某些浏览器的自动填充功能。需要在组件的 focus 事件中移除 readonly。

v-model="username"

auto-complete="new-password"

:readonly="isReadOnly"

@focus="handleFocus"

>