Vue+element 回车查询页面刷新

森海北屿 ღ2024-12-21 10:41

问题描述：

form 表单出查询条件需要实现 input 输入完成后键盘回车查询：@keyup.enter="handleQuery"，如果 form 里只有一个input，回车没有触发事件，而是刷新页面，放两个input就没问题

问题原因：

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 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 < el-form > 上加一个@submit.native.prevent

解决方法：

阻止表单默认提交行为

form表单上加一个@submit.native.prevent
el-input 增加 @keyup.enter.native

vue2 示例：

html 复制代码

<el-form @submit.native.prevent >
  <el-form-item>
    <el-input v-model="num" @keyup.enter.native="handleQuery"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button @click="onCancel()">取消</el-button>
    <el-button type="primary" @click="onNext">确定</el-button>
 </el-form-item>
</el-form>

注意：

.native修饰符在vue3中被弃用

解决方法： < el-form > 添加 @submit.prevent

类似问题 vue项目中点击提交按钮路由多了个问号