elementUI 输入框按回车刷新页面问题

分析原因:

当 el-form 表单内只有一个 el-input 输入框时,且type为text类型时,在输入框内按回车就会触发表单的提交事件。

而当 el-form 表单内有多个 el-input 输入框时,按回车不会执行任何操作。

使用.prevent修饰符来阻止默认的表单提交行为:

@submit.native.prevent注解添加到el-form标签上从而阻止了按下回车键时的页面刷新

.native 表示对一个组件绑定系统原生事件

.prevent 表示阻止默认事件(如form的submit事件默认提交会刷新页面,.prevent修饰符可以阻止该默认事件)

html 复制代码
<el-form @submit.native.prevent>
  <el-form-item>
    <el-input v-model="input" placeholder="请输入内容"></el-input>
  </el-form-item>
</el-form>
相关推荐
huohaiyu2 小时前
从URL到页面的完整解析流程
前端·网络·chrome·url
阿星AI工作室4 小时前
一个简单Demo彻底理解前后端怎么连的丨Figma + Supabase + Vercel
前端·人工智能
aircrushin4 小时前
一拍即传的平替,完全免费的实时照片墙!
前端
鹏北海6 小时前
JSBridge 原理详解
前端
孟健6 小时前
我的网站被黑了:一天灌入 227 万条垃圾数据,AI 写的代码差点让我社死
前端
anOnion6 小时前
构建无障碍组件之Checkbox pattern
前端·html·交互设计
IT枫斗者8 小时前
IntelliJ IDEA 2025.3史诗级更新:统一发行版+Spring Boot 4支持,这更新太香了!
java·开发语言·前端·javascript·spring boot·后端·intellij-idea
N***p3658 小时前
Spring Boot项目接收前端参数的11种方式
前端·spring boot·后端
享誉霸王9 小时前
15、告别混乱!Vue3复杂项目的规范搭建与基础库封装实战
前端·javascript·vue.js·前端框架·json·firefox·html5
a11177610 小时前
飞机躲避炸弹 网页游戏
前端·开源·html·threejs