el-form表单输入框回车事件导致页面刷新问题解决

小月光白

于 2024-08-13 10:33:00 发布

阅读量221

点赞数 1

文章标签：前端 javascript

本文链接：https://blog.csdn.net/q1740706590/article/details/141157040

版权

1、背景介绍

在项目中使用form表单时只有一个输入框，输入框绑定了回车触发提交事件，但输入内容按回车时并未执行事件函数，反而刷新页面。

2、原因分析

W3C标准的说法是：当 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。

3、解决方法

给el-form表单上加一个@submit.native.prevent，阻止表单提交的默认行为。

<el-form @submit.native.prevent >  
  <el-form-item>    
  <el-input placeholder="输入号码回车实现搜索" v-model="num" @keyup.enter.native="todo" /> 
  </el-form-item>  
  <el-form-item>    
  <el-button type="primary" @click="submit">确定</el-button> 
  </el-form-item> 
</el-form>