el-input输入框回车时触发表单默认提交事件解决方法

最新推荐文章于 2024-06-21 16:11:15 发布
最新推荐文章于 2024-06-21 16:11:15 发布
阅读量1k 收藏 1
点赞数 1
文章标签： elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46886397/article/details/133753171
版权

 

问题描述:
输入框中按回车按钮，页面重新刷新
问题原因:
当 el-form 内只有一个 el-input 时，在输入内回车就会触发表单提交的默认事件

解决方案
在el-form中加@ submit.prevent阻止这一默认行为

奶黄夹心
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue element-ui实现input输入框金额数字添加千分位
10-15
主要介绍了vue element-ui实现input输入框金额数字添加千分位,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
解决vue elementUI 使用el-select 时 change事件的触发问题
01-18
如下所示： <el v-model=level size=mini ...我们需要的是选择之后才触发，但是这样写你会发现，页面初始化的时候会触发多次，选择之后又会触发多次，原因是我们用错了标签，应该用 @change=”selectChange()
el-form下单个el-input文本框回车触发提交刷新的问题
wzzjswx的博客
06-20 211
今天在写一个信息搜索栏时,就是一个简单的 el-dialog 弹窗,里面只有一个 el-form 表单 和一个 el-input 文本框.另外在歪一下楼.简单说下 el-input 的这两种事件区别,在输入框内分别添加两个事件并进行日志输出.出现的效果如下.接着翻了下 el-form 文档,有个关于这个问题的特别提示.(只有一个文本框会出现该问题,两个就没有)当焦点在文本框内时,按下回车键,会触发表单提交并刷新页面.
vue使用element-ui的el-input监听不了回车事件的解决方法
08-28
小编在使用element-ui时，el-input组件监听不了回车事件，怎么回事呢？下面小编给大家带来了vue使用element-ui的el-input监听不了回车事件的解决方法，一起看看吧
el-input 回车事件keydown刷新页面（白屏）
最新发布
vue+iview 动态渲染表格（vue.js结合iview插件）
06-21 425
【代码】el-input 回车事件keydown刷新页面（白屏）
el-input回车事件
weixin_46166949的博客
01-11 3588
<el-input placeholder="请输入内容" v-model="form.invoiceCode" @keyup.enter.native="onSubmitKeyDown"> </el-input>
ElementUI input输入、button enter回车事件
Cheung1992的博客
10-11 5760
1、ElementUI el-input 点击回车会导致页面刷新，输入内容丢失； 2、el-button点击后，再次按回车会重复触发； 3、如何实现多个输入框回车触发同一个事件
vue项目如何实现input输入框回车后，触发登录事件
qq_52526079的博客
10-25 1707
2.在mounted钩子中添加，通过ref给el-form添加事件，使子元素el-input输入框也可以触发该事件。注释：如果你在elementui的el-input框绑定该事件，是不会被触发的。注释：此方法可以在el-input输入框中绑定键盘事件。
Element 输入框input响应回车事件
s_156的博客
02-22 1561
Element 输入框input响应回车事件
vue:el-input输入时限制输入的类型操作
10-15
主要介绍了vue:el-input输入时限制输入的类型操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
el-input 监听键盘回车事件，且不触发换行
Khada_Finger的博客
09-18 2892
关于 el-input 触发回车事件，但不触发换行的问题。
vue3和ts的el-input的键盘回车绑定事件
weixin_51244498的博客
02-17 4016
vue3和ts的el-input的键盘回车绑定事件
el-input 回车事件
领悟
08-12 284
el-input 回车事件。
解决Element-plus 给el-input 添加回车事件会刷新页面的问题
qq_58633408的博客
01-31 866
组件默认情况下，按下回车键会触发表单的提交，而表单的提交会触发页面的刷新。这是浏览器默认行为。@submit.prevent 就可以阻止浏览器刷新页面的默认行为，问题就成功解决啦！解决之后,按下回车，就出发了正则验证，没有刷新页面。然后就按下回车就导致了页面刷新。
el-input回车触发页面刷新问题和解决方法
qq_42396813的博客
12-25 572
el-input回车触发页面刷新
el-input上按回车 界面自动刷新/跳转 问题原因分析及解决办法
weixin_45966674的博客
07-20 1171
是因为el-form一个比较智能的判断 如果表单上只有一个输入框 则在输入框上按回车 表单就会自动提交 且刷新界面老实说 挺奇葩的 这个智能的判断 很多时候都会成为智障 因为大部分人都不需要这个功能 且很多时候会给大家带来问题 这个问题还不容易发现解决办法就是 在el-form 上加上@submit.native.prevent 防止事件冒泡 参考代码如下...
el-input 回车触发事件，解决回车触发页面刷新
weixin_42338804的博客
02-05 4672
在 el-input加入： @keyup.enter.native=“事件” 事件在methods中定义 <el-input v-model="input" @keyup.enter.native="search1"> 在外层表单el-form加入： @submit.native.prevent <el-form @submit.native.prevent> 在输入框输入数据，再回车不会刷新页面了 ...
Element UI 中el-input 框回车触发页面刷新问题及解决
lee_uncle的博客
02-27 1846
在el-form标签增加表单事件@submit.native.prevent,防止搜索框回车键刷新整个页面。当el-input 获取焦点后按到回车按钮会刷新当前页面。
Vue:Element组件el-input输入框支持上下左右回车键跳转
qq_35147970的博客
07-04 2869
Element组件el-input输入框支持上下左右回车键跳转
el-input按回车键触发事件
08-18
要使 el-input 组件在按下回车键时触发事件，可以使用以下两种方法： 1. 使用 @keyup.enter 事件监听器： ```html <el-input @keyup.enter="handleEnter"></el-input> ``` ```javascript methods: { handleEnter()...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值