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>
相关推荐
KKKK5 分钟前
SSE(Server-Sent Events)流式传输原理和XStream实践
前端·javascript
子兮曰23 分钟前
Humanizer-zh 实战:把 AI 初稿改成“能发布”的技术文章
前端·javascript·后端
Din1 小时前
主动取消的防抖
前端·javascript·typescript
百度地图汽车版1 小时前
【AI地图 Tech说】第九期:让智能体拥有记忆——打造千人千面的小度想想
前端·后端
臣妾没空1 小时前
Elpis 全栈框架:从构建到发布的完整实践总结
前端·后端
H5开发新纪元1 小时前
Nginx 部署 Vue3 项目完整指南
前端·javascript·面试
决斗小饼干1 小时前
跨语言移植手记:把 TypeScript 的 Codex SDK 请进 .NET 世界
前端·javascript·typescript
小码哥_常1 小时前
Android Intent.setAction失效报错排查与修复全方案
前端
bluceli1 小时前
JavaScript模块化深度解析:从CommonJS到ES Modules的演进之路
前端·javascript
前端人类学1 小时前
前端输入框禁用:disabled、readonly 与.prop (‘disabled‘, true) 完全解析
前端·javascript