搜索表单el-form在输入框回车时导致页面刷新

在掘金上蹦下跳

2024-11-29 116 阅读1分钟

问题背景
- 当仅有一个el-input的时候，在el-input中回车会触发默认的form表单提交事件，导致页面刷新。如果有多个表单元素则不会出现这个问题
原因
- 在使用el-form 组件时，输入框回车导致页面刷新的原因主要是由于浏览器的默认行为。具体来说，当你在一个表单中按下回车键时，浏览器会尝试提交表单，这会导致页面刷新
- 表单本身存在默认行为，在 HTML 中，表单元素默认是可以被提交的。当你在输入框中按下回车时，浏览器会认为你想要提交该表单，从而触发提交事件，导致页面刷新。因为el-form本质上也是表单所以遵循HTML默认规则。

解决方案

在el-from表单上使用

vue2：@submit.native.prevent.capture
vue3：@submit.native.prevent

  <el-form ref="formRef" :model="form" :rules="rules" @submit.native.prevent>
    <el-form-item label="输入" prop="inputField">
      <el-input v-model="form.inputField" @keyup.enter="handleSubmit"></el-input>
    </el-form-item>
    <el-button type="primary" @click="handleSubmit">提交</el-button>
  </el-form>

在提交方法中调用 event.preventDefault()：在你自定义的提交处理函数中阻止默认行为。

handleSubmit(event) {
    if (event) {
      event.preventDefault(); // 阻止默认提交行为
    }
}
'
运行
运行

监听 @keyup.enter 事件，在输入框中捕捉回车事件，直接调用提交方法，而不依赖于表单的默认行为。
- ```
<el-input v-model="form.inputField" @keyup.enter="handleSubmit"></el-input>
 
handleSubmit() {
......
}
```