VUE + ElementUI 仅有一个搜索框时，阻止回车默认行为 @submit.native.prevent

zlting~

于 2021-04-25 11:00:23 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： VUE element UI 文章标签： elementui

本文链接：https://blog.youkuaiyun.com/sunshineTing2/article/details/116119012

VUE 同时被 2 个专栏收录

116 篇文章

订阅专栏

element UI

10 篇文章

订阅专栏

本文介绍如何在ElementUI的el-input组件中正确处理回车事件，避免默认提交表单的行为，并展示如何通过添加@submit.native.prevent来阻止这一默认操作。

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

一、ElementUI el-input框添加回车事件 `@keyup.enter.native=""`

二、ElementUI 点`enter回车`搜索，发现地址栏后面多了个`？`

不触发搜索方法，而直接刷新页面了！
这是由于 W3C 标准中有如下规定：

When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.
即：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在标签上添加 @submit.native.prevent

<el-form ref="form" :model="pageQuery" @submit.native.prevent>
  <el-form-item>
    <el-input 
              placeholder="请输入专业术语"
              v-model.trim="pageQuery.title"
              clearable
              @keyup.enter.native="searchList"
     ></el-input>
  </el-form-item>
</el-form>