返回顶部

elementUI——el-input阻止输入后回车清除输入值,且提交表单刷新页面

参考:

1.键盘回车事件导致页面刷新的问题vue+element

https://blog.csdn.net/weixin_47560716/article/details/128820592?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-4-128820592-blog-131048775.235^v38^pc_relevant_sort_base3&spm=1001.2101.3001.4242.3&utm_relevant_index=7

 

我的情况:项目使用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不会触发

 

posted @   前端-xyq  阅读(1088)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
点击右上角即可分享
微信分享提示
回到顶部