elementUI——el-input阻止输入后回车清除输入值,且提交表单刷新页面
参考:
1.键盘回车事件导致页面刷新的问题vue+element
我的情况:项目使用vue+element,发现el-input搜索关键词时,回车后会清空关键词,提交表单且刷新页面
原因:
1.刷新页面,是因为:当一个 form 元素中只有一个输入框时,在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为,可以在form标签上添加 @submit.native.prevent
2.清空关键词,是因为触发了input的默认行为,通过@keydowm.enter.native.stop + e.preventDefault() 阻止
代码:
<el-form :model="form" @submit.native.prevent> <el-input v-model="form.condition" placeholder="请输入" @keydown.enter.native.stop="enterFn" ></el-input> <el-form> ... enterFn(e) { e.preventDefault(); // 阻止回车清空输入值 this.load(); // 加载数据事件 },
注意:需要是keydown事件,keyup不会触发
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」