526互联

elementUI——el-input阻止输入后回车清除输入值，且提交表单

发布时间 2023-08-25 11:30:26作者: 前端-xyq

参考：

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.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不会触发