解决vue3中el-input在form表单按下回车刷新页面

已于 2024-07-16 17:46:44 修改
阅读量528 收藏
点赞数 1
分类专栏： ❤️❤️--vue3项目实战记录 文章标签： vue.js javascript 前端
于 2024-07-16 17:45:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41579104/article/details/140472702
版权

问题：在input框中点击回车之后不是调用我写的回车事件，而是刷新页面

原因： 如果表单中只有一个input 框则按下回车会直接关闭表单 所以导致刷新页面

解决方法 ： 再写一个input 表单 ，并设置style="display:none"

<ElInput style="display: none"></ElInput>

问题解决~ 

suoh's Blog
关注
专栏目录
Vue.js：element-ui组件库el-form表单el-input输入框按下回车键会刷新页面的问题
彭世瑜的博客
04-29 1301
当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 el-form 查询导致页面刷新
qq_29236119的博客
03-10 847
1、列表点击查询条件返回具体的内容，当输入查询条件按下回车或者是点击查询按钮时候发生页面刷新，并没有去查询，很是费解，其他页面就没有这种情况，然而最后发现导致问题发生的原因竟是当表单只有一个文本框时，查询会触发表单提交事件，导致页面刷新，代码如下： <el-form :inline="true" :model="dataForm" @keyup.enter.native="getSearchDataList()"> <el-form-item label="宠物名称">
el-input上按回车 界面自动刷新/跳转 问题原因分析及解决办法
weixin_45966674的博客
07-20 1221
是因为el-form一个比较智能的判断 如果表单上只有一个输入框 则在输入框上按回车 表单就会自动提交 且刷新界面老实说 挺奇葩的 这个智能的判断 很多时候都会成为智障 因为大部分人都不需要这个功能 且很多时候会给大家带来问题 这个问题还不容易发现解决办法就是 在el-form 上加上@submit.native.prevent 防止事件冒泡 参考代码如下...
el-input按回车 界面自动刷新
只会写bug
08-23 759
先解释一下时间冒泡（Event Bubbling）是事件处理的一种机制，它描述了事件从最具体的元素（如一个按钮或链接）开始，然后逐级向上转播至不那么具体的节点的过程。在事件冒泡过程中，当一个事件在一个元素上触发时，该事件会首先在这个元素上触发。如果这个元素的父元素也注册了器来处理相同的事件，那么这个事件也会在这个父元素上触发。这个过程会一直持续到事件到达文档的根节点为止。事件冒泡是一个非常有用的概念，因为它允许您在一个较高的层次上处理事件，而不是在每个可能的元素上都设置事件处理器。
使用el-input回车会刷新页面
梦雨的博客
08-18 890
当使用Form组件中只有一个Input组件时，输入后点击回车会出现刷新页面现象，我们可以通过阻止表单的默认提交行为来解决问题。
vue3+element-plus input输入框回车键全页面刷新
博客
11-07 1144
vue3+element-plus input输入框回车键全页面刷新
vue3和ts的el-input的键盘回车绑定事件
weixin_51244498的博客
02-17 4481
vue3和ts的el-input的键盘回车绑定事件
vue中el-input回车事件刷新页面
h_未来可期_的博客
12-31 1976
需求 在页面中，输入框中输入内容以后，回车查询下面的数据 方案 使用input的回车事件 => @keyup.enter.native="” 问题 页面中点击回车以后，会刷新页面，并且路由中加了一个？ 解决方案 查证后得知，form表单中，如果只有一个input框的话，回车的时候默认提交了表单，导致刷新了页面 方案1 添加一个其他的input，但是不显示出来 vue的话不能使用v-if修饰，v-if还是会出问题，必须使用v-show <el-form ref="searchFom"
解决vue+element 键盘回车事件导致页面刷新的问题
01-19
今天发现输入框输入内容后回车就会刷新页面 解决 <el inline=true> </el> el-from 加上 @submit.native.prevent 具体是参考element-ui文档解决的 W3C 标准中有如下规定： When there is only one single-line ...
vue3+element-plus表格插入输入框，当遍历出多个表格的时候想使用回车事件去获取下一个输入框的
weixin_50041614的博客
09-03 1623
vue3+element-plus表格插入输入框，当遍历出多个表格的时候想使用回车事件去获取下一个输入框的
若依框架Vue3自动生成代码搜索框回车会刷新页面
weixin_49703353的博客
08-12 362
解决这个办法的方法就是在form表单中添加 @submit.native.prevent 即可解决该问题。这个bug是存在于一个form表单中只有一个input搜索框的时候按下回车键会导致页面的刷新。
el-input 在 el-form中回车刷新页面
前端三疯的博客
07-12 341
问题描述
vue使用element-ui的el-input监听不了回车事件解决
dddp75921的博客
03-30 243
vue使用element-ui的el-input监听不了回车事件，原因应该是element-ui自身封装了一层input标签之后，把原来的事件隐藏了，所以如下代码运行是无响应的： <el-input v-model="form.loginName" placeholder="账号" @keyup.enter="doLogin"></el-input> 解决方法需要...
【解决vue中表单回车事件会刷新页面问题】
weixin_47102346的博客
08-02 2236
当vue的搜索框form表单有且只有一个输入框时，点击回车，我们要的效果是带着输入框的value值去查询列表，但实际上会触发刷新整个页面，想让页面不刷新,可使用。需要在form标签加上。
el-form表单，按下回车后刷新页面的问题
猿始森林
03-29 595
当你的表单只有一项时，按下回车默认会提交表单，所以会出现刷新页面的现象。如上，指定回车或提交的事件，就可以避免刷新页面的问题。
el-input 点击enter键刷新界面
最新发布
KIKIguo的博客
08-28 407
当使用el-form时， 如果只包含一个el-input时，按下回车表单的默认提交事件。在el-form中使用@submit.native.prevent就可以阻止回车事件。使用el-input搜索功能，点击enter键会刷新界面。
el-input 使用 回车键会刷新页面的问题
博哥的二进制世界
10-26 2404
el-input 使用 回车键会刷新页面的问题
el-input 输入框回车刷新页面问题
monkey7
10-09 953
偶然间发现的 弹窗里的el-input 输入后 回车 会导致整个页面刷新 由于项目是刷新就回首页 所以看起来奇奇怪怪的 研究研究： 发现如果 el-form表单里只有一个el-input的时候 点回车 就会触发刷新页面 解决方法： 在<el-form 上加 @submit.native.prevent> ...
vue3中el-input表单验证
08-18
在Vue 3中，可以使用element-plus组件库中的el-form和el-form-item来进行表单验证。首先，在template中使用el-form组件，并将需要验证的表单项包裹在el-form-item中。例如，可以像这样设置一个姓名输入框的验证： ```html <el-form :model="editForm" ref="editFormRef"> <el-form-item label="姓名:" prop="name" :required="true"> <el-input v #### 引用[.reference_title] - *1* *2* *3* [vue3之表单验证](https://blog.csdn.net/attach_uzi/article/details/120442143)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

suoh's Blog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值