解决Element-UI表单在表单输入框内按回车会触发页面重定向的问题

最新推荐文章于 2025-06-26 15:22:25 发布

XieTiansheng

最新推荐文章于 2025-06-26 15:22:25 发布

阅读量2.3k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： Vue 前端 Element

本文链接：https://blog.youkuaiyun.com/qq_38777773/article/details/92117448

前端同时被 3 个专栏收录

5 篇文章

订阅专栏

Vue

4 篇文章

订阅专栏

Element

2 篇文章

订阅专栏

本文介绍了一种常见问题的解决方案，在使用input输入框时，如何避免按下回车键导致页面重定向。通过在form表单中添加@submit.native.prevent语句，可以有效防止这一现象，确保用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这几天在用表单的过程中遇到了问题，每当焦点处于input输入框内，按下回车键会触发页面重定向。

解决方式：

	<!-- 在form表单内添加@submit.native.prevent语句 -->
	<el-form @submit.native.prevent>
		...
	</el-form>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

XieTiansheng

关注关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

前端框架-Vue.js语法

aming小老弟

10-11

612

父组件中的 handleUpdateChildValue 方法接收到参数后，将其设置为 childValue 变量的值，从而完成了子组件向父组件传递数据的过程。当我们需要对发布到线上的文件进行修改时，重新编译的文件名如果和之前版本的相同会引起浏览器无法识别而加载缓存文件的问题。注意： vue组件中的全部html都存在于一个块元素中，就是app.vue中的 id名字为app的div。Vue提供的前端路由工具，利用其我们实现页面的路由控制，局部刷新及按需加载，构建单页应用，实现前后端分离。对状态的派生和缓存。

vue3.0 从入门到入土--------综合案例

drhrht的博客

03-09

748

目录 vue-cli ?组件库 axios 拦截器? ?proxy 跨域代理 ?用户列表案例总结 vue-cli 1. 什么是 vue-cli vue-cli（俗称：vue 脚手架）是 vue 官方提供的、快速生成 vue 工程化项目的工具。 vue-cli 的中文官网首页：https://cli.vuejs.org/zh/ ① 开箱即用 ② 基于 webpack ③ 功能丰富且易于扩展 ④ 支持创建 vue2 和 vue3 的项目 2. 安装 vue-cli vue-cli 是基于 Node.js

参与评论您还未登录，请先登录后发表或查看评论

enter键控制input光标移动到下一个框

10-24

enter键控制input光标移动，通过判断是否是最后一个input输入框来决定是继续向下跳还是跳到第一个input输入框

element Form当el-input有焦点时，按下回车会发生页面刷新事件

shidouyu的专栏

09-10

390

问题描述：在提交某项业务时，需要输入一次密码，点击下方确定后提交，但是当el-input有焦点时，按下回车会发生页面刷新事件，url中的参数也被清空。代码如下： <div class="password ft12"> <el-form> <el-form-item label="密码：" label-width="95px" prop="password" class="password"> <el-input clas...

ElementUI中el-input的回车事件

最新发布

Stefan__M的博客

06-26

302

解决表单回车自动刷新问题：当单个input的表单回车时，浏览器会默认提交导致页面刷新。在el-form组件中添加@submit.native.prevent属性即可阻止默认行为，同时保留@keyup.enter.native的自定义提交事件。修改后代码：<el-form :model="form" @submit.native.prevent> <el-input v-model="value" @keyup.enter.native="s

vue element-ui 键盘输入enter键触发事件

未末的博客

02-28

2822

因为有时候会遇到因为有父级的影响事件不生效的情况，所以需要加.native <el-input class="input-new-tag" v-model="item.nameValue" size="mini" placeholder="请输入名称" :maxlength="20" v-focus @keyup.enter.native="nameConfirm(item)" > </el-input> 有时候层级过多，各元素相互影响

ElementUI input输入、button enter回车事件

Cheung1992的博客

10-11

6930

1、ElementUI el-input 点击回车会导致页面刷新，输入内容丢失； 2、el-button点击后，再次按回车会重复触发； 3、如何实现多个输入框回车触发同一个事件

ElementUI中input回车触发页面刷新

weixin_46517138的博客

11-10

583

【代码】ElementUI中input回车触发页面刷新。

vue从入门到入土--------综合案例

每天都要努力学习哦~~

02-03

1863

目录 vue-cli 组件库 axios 拦截器 proxy 跨域代理用户列表案例总结 vue-cli 1. 什么是 vue-cli vue-cli（俗称：vue 脚手架）是 vue 官方提供的、快速生成 vue 工程化项目的工具。 vue-cli 的中文官网首页：https://cli.vuejs.org/zh/ ① 开箱即用 ② 基于 webpack ③ 功能丰富且易于扩展 ④ 支持创建 vue2 和 vue3 的项目 2. 安装 vue-cli ...

vue框架使用

qq_45645848的博客

01-11

1483

前端vue基础知识总结，汇总

element-ui 输入框键盘回车事件导致页面刷新

s_156的博客

07-02

488

W3C标准的说法是：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。例如：<el-input placeholder=“输入号码回车即可呼叫” v-model=“num” @keyup.enter.native=“callOut”>现在这个form里只有一个input，你回车,它竟然没有触发事件，而是刷新页面了，而且放两个input就没问题了，element-ui提供了输入框的键盘事件：@keyup.enter.native=“callOut”

关于element ui 按钮点击后，按enter回车，依然会触发点击的处理

jxw921026的博客

01-10

3805

如题，直接说如何解决的，直接禁用回车事件，暂时这样解决的，如有更好的解决方案，欢迎讨论

Vue element el-form表单提交敲击enter键时 url上会自动加上问号？并刷新页面解决办法

hmyhicc的博客

06-02

629

注意：鼠标事件导致页面刷新问题，在el-form上增加 @submit.native.prevent 可阻止页面刷新 <el-form @submit.native.prevent> <el-form-item :inline="true"> <el-input @keyup.enter.native='onSubmit'></el-input> </el-form-item> <el-form-item>

vue2中ElementUI输入框，使用enter回车键搜索或提交

weixin_45750721的博客

03-31

3005

vue2中ElementUI输入框，使用enter回车键搜索或提交

vue回车新增一个输入框并且光标下移

Harley567

02-13

481

vue回车新增一个输入框并且光标下移

vue按下回车键光标移到下一个输入框

xvGUANGhui的博客

03-11

4132

vue按下回车键光标移到下一个输入框

element-ui form表单键盘回车键enter会导致整个页面的刷新问题

wenbintian的博客

02-13

3440

问题以下代码，此时按 enter 回车键，整个页面都会刷新 &lt;el-form /&gt; &lt;el-form-item&gt; &lt;el-input v-model="query"&gt;&lt;/el-input&gt; &lt;/el-form-item&gt; &a

elementUI-el-input聚焦时按回车回刷新页面

小多的博客

10-24

937

el-form表单只有一个输入框，按回车默认触发提交按钮，导致提交刷新页面。在el-form表单中加。输入框中按回车页面刷新。

解决点击按钮后，按回车无限触发按钮事件

JunVei的博客

09-07

1702

解决点击按钮后不失焦的问题