浏览器中 element ui 表单组件自动填充用户名密码或者手机号密码问题

正在写bug中

于 2022-08-25 10:31:25 发布

阅读量910

点赞数 2

分类专栏： vue js 文章标签： elementui vue.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_53657413/article/details/126519379

版权

js 同时被 2 个专栏收录

4 篇文章

订阅专栏

vue

3 篇文章

订阅专栏

本文介绍了一种通过设置HTML元素的只读属性并在聚焦时移除该属性的方法来阻止浏览器自动填充表单数据的技术。这种方法适用于需要保护用户隐私或确保输入数据准确性的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决方案：只需要添加onfocus="this.removeAttribute('readonly');" readonly，就不会自动填充。大概意思就是初始化为只读，当聚焦时去掉只读属性，只读可以防止浏览器自动填充。

// 用户输入框
<el-input 
	v-model="userForm.name" 
	placeholder="请输入用户姓名"
	readonly
	onfocus="this.removeAttribute('readonly');" 
></el-input>

// 密码输入框
<el-input 
	v-model="userForm.password" 
	maxlength="30" 
	show-password 
	placeholder="请输入登录密码"" 
></el-input>