el-input按回车 界面自动刷新

最新推荐文章于 2025-04-22 13:24:27 发布
最新推荐文章于 2025-04-22 13:24:27 发布
阅读量425 收藏
点赞数 5
分类专栏： Vue 文章标签： vue.js 前端 elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45561965/article/details/143485097
版权

在做项目的时候，需求是让输入框输入内容之后，回车直接搜索
在输入框中加上@keyup.enter.native事件之后
没有生效
还是直接刷新页面
找了半天终于解决问题了

原因是因为el-form一个比较智能的判断 如果表单上只有一个输入框 则在输入框上按回车 表单就会自动提交 且刷新界面 这个问题还不容易发现

以下是解决方法:
希望可以帮到你
直接在el-form中加上
@submit.native.prevent
就OK了
在这里插入图片描述
好了看到这如果帮到你了
就收藏加关注叭~
加个关注
不迷路~~~~~

Vue.js：element-ui组件库el-form表单el-input输入框按下回车键会刷新页面的问题
彭世瑜的博客
04-29 1774
当form表单中只有一个input时，按下回车建会自动触发页面的提交功能， 产生刷新页面的行为 <el-input v-model="value" @keyup.enter.native="handleEnter"/> 需要在el-form 中阻止表单的默认提交行为 <el-form @submit.native.prevent> <el-input v-model="value" @keyup.enter.native="handleEnter"/> <
Vue + elementUI使用中总结，包括踩坑（更新中）
是日前端
11-11 2775
<el-table-column prop="reportName" label="报告名称"> <template slot-scope="scope"> <el-input v-model="scope.row.reportName" @blur="confirmData" clearable></el-input> </tem
Vue+elementUI表单input输入框回车时触发页面刷新问题解决方法
m0_64664995的博客
01-06 594
组件时，按下回车键默认会触发表单的提交行为。这是因为浏览器的默认行为是将回车键视为提交表单的快捷键。在 HTML 表单中，当表单内只有一个输入框时，按下回车键会触发表单的提交事件，从而导致页面刷新。以上两种方法均可以解决回车刷新页面问题，如有不足敬请指正。虽然最求的目标各不相同，但群星的轨道终将彼此交汇。在 <el-from> 标签里面添加 @submit.native.prevent ，这个。原理：当在 Vue 中使用 Element UI 的。修饰符可以阻止表单的默认提交行为，从而防止页面刷新。
el-form里面的input输入框按回车自动刷新页面的问题
最新发布
weixin_61978391的博客
04-22 582
el-input v-model="searchDetailData.Name" placeholder="请输入工作内容" clearable @keydown.native="handleEnter"></el-input>在el-form中，如果只有一个input的话，按回车表单会自动提交，刷新页面。1.只有一个的话直接不用el-form表单；2.给input加上停止回车的事件。来阻止表单的默认提交行为。
el-input上按回车 界面自动刷新/跳转 问题原因分析及解决办法
weixin_45966674的博客
07-20 1313
是因为el-form一个比较智能的判断 如果表单上只有一个输入框 则在输入框上按回车 表单就会自动提交 且刷新界面老实说 挺奇葩的 这个智能的判断 很多时候都会成为智障 因为大部分人都不需要这个功能 且很多时候会给大家带来问题 这个问题还不容易发现解决办法就是 在el-form 上加上@submit.native.prevent 防止事件冒泡 参考代码如下...
el-input 使用 回车键会刷新页面的问题
qq_22187895的专栏
08-14 1660
使用el-input的时候，光标聚焦在输入框，按下回车，会刷新页面。这是因为当el-form表单中只有一个input时，按下回车建会自动触发页面的提交功能， 产生刷新页面的行为。如下代码，在 el-form 中 加个 @submit.native.prevent，就可以了，form表单内多增加一个元素，不占据位置即可。.prevent 提交以后不刷新页面。.native 绑定系统原生事件。@submit: 表单提交。
使用el-input回车会刷新页面
梦雨的博客
08-18 970
当使用Form组件中只有一个Input组件时，输入后点击回车会出现刷新页面现象，我们可以通过阻止表单的默认提交行为来解决问题。
el-input 注册回车事件
03-14
如果 `el-input` 被放置在一个 `<el-form>` 表单内部，并且该表单仅包含一个输入框时，按下回车可能会触发整个页面刷新的行为。这是因为浏览器默认会对单一字段的表单进行提交操作。因此，在这种情况下建议显式阻止...
el-form 新增的时候不让表单校验
01-04
Element UI 默认会在输入框失去焦点或按下回车键时立即进行校验。可以通过配置 `el-form` 组件中的属性来改变这一行为。 ```html <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px"> <!...
宿舍管理系统--前后端分离式项目架构流程复盘（三万字详解）
罗铠威的博客
08-08 1765
本篇博客主要以巩固前后端分离式项目架构流程，通过开发一个宿舍管理系统为例，系统地梳理所学知识以及提高业务逻辑能力，欢迎大家来交流经验🐒这个是创建完成后的样子执行npm run serve命令,按回车进入浏览器，生成此页面，说明项目创建完成·1.直接删掉components文件下的HelloWorld.vue组件2.清理APP.vue默认组件内容：【🧸在index.js配置】 2.在🧸APP.vue中添加路由视图 【🎀配置Element UI】 🦓安装 Element UI 🪂在 mai
【elementui】el-input按下回车键会刷新整个页面的解决方法
bbt953的博客
11-01 908
el-input按下回车键会刷新整个页面的解决方法
Element plus中el-input框回车触发页面刷新问题以及解决办法
ZwaterZ的博客
01-08 2776
在事件冒泡过程中，当一个事件在一个元素上触发时，该事件会首先在这个元素上触发。如果这个元素的父元素也注册了事件处理器来处理相同的事件，那么这个事件也会在这个父元素上触发。这个过程会一直持续到事件到达文档的根节点为止。当用户点击其中一个子元素时，不仅该子元素的事件处理器会被调用，而且其所有祖先元素（包括div元素）的事件处理器也会被调用，因为事件会“冒泡”到它们那里。事件冒泡允许在较高的层次上处理事件，从而避免在每个元素上都设置事件处理器，这样可以减少代码的重复，并且使得事件处理更加模块化和可维护。
el-input回车会自动刷新页面原因及解决方法
yb305
07-08 3046
el-input回车会自动刷新页面原因及解决方法
el-input 点击enter键刷新界面
KIKIguo的博客
08-28 825
当使用el-form时， 如果只包含一个el-input时，按下回车表单的默认提交事件。在el-form中使用@submit.native.prevent就可以阻止回车事件。使用el-input搜索功能，点击enter键会刷新界面。
el-input回车刷新页面
weixin_38168838的博客
07-11 550
解决方法： 在el-form上添加@submit.native.prevent <el-form @submit.native.prevent> <el-input v-mode="name"></el-input> </el-form> 转载于:https://www.cnblogs.com/listen9...
elementUI el-input 回车页面刷新
纸上得来终觉浅
10-28 1466
有一种bug,可遇不可求。看似不起眼，可能是压死骆驼的最后一根稻草 问题描述：在使用 el-input 的时候一定看一看你的 el-input 是否在 el-form 中，如果在请你先 enter 一下，看看页面有没有变化；毫无疑问你的页面 刷新了; 分析 ----> bug fixed: 起初还在看日志的你，结果换然大悟，这一回车竟然出发了form表单的默认提交行为，导致页面refresh,so 上代码 @submit.native.prevent: 微笑刺客：你说的致命不过如此！ &l
element-ui的el-input回车刷新页面
xdhc的博客
07-31 3427
解决办法： 在el-form添加@submit.native.prevent &lt;el-form @submit.native.prevent&gt; &lt;/el-form&gt;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值