el-input回车之后刷新整个页面解决

最新推荐文章于 2024-08-28 17:21:02 发布
最新推荐文章于 2024-08-28 17:21:02 发布
阅读量197 收藏
点赞数
文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44740072/article/details/129120426
版权
当el-form中只有一个el-input时，回车会默认触发表单的刷新事件。为防止这种情况，可以在el-form上添加@submit.native.prevent属性，这样可以阻止表单提交时的默认行为，避免页面刷新。
摘要由CSDN通过智能技术生成

el-input回车之后刷新整个页面解决方案

原因：

el-form如果只有一个el-input回车之后默认触发表单的刷新事件

解决方案：

el-form里加上@submit.native.prevent

<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" @submit.native.prevent>
写bug小白
关注
Vue.js：element-ui组件库el-form表单el-input输入框按下回车键会刷新页面的问题
彭世瑜的博客
04-29 1333
当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"/> <
Vue2踩坑记录 - el-input无法接收键盘输入，对响应式对象的深入理解-对象和数组的响应式
最新发布
l_q_l的专栏
09-11 938
今天发现，某对话框打开后，其中的input无法接收键盘输入，我在页面上劈里啪啦敲了一堆，页面输入框空空如也，的确是用了v-model来实现双向绑定。那么，双向数据传输除了使用v-model之外，还有其他的条件么？我这个正好是一个form表单中的控件，绑定的是一个对象中的属性：form.projectName。但是，我写了个reset函数，其中重新定义了一个form对象，覆盖了data中的form。1、使用对form中对象属性赋值为null的方法来重置，而不是重新定义form对象。
el-input上按回车 界面自动刷新/跳转 问题原因分析及解决办法
weixin_45966674的博客
07-20 1228
是因为el-form一个比较智能的判断 如果表单上只有一个输入框 则在输入框上按回车 表单就会自动提交 且刷新界面老实说 挺奇葩的 这个智能的判断 很多时候都会成为智障 因为大部分人都不需要这个功能 且很多时候会给大家带来问题 这个问题还不容易发现解决办法就是 在el-form 上加上@submit.native.prevent 防止事件冒泡 参考代码如下...
el-input 点击enter键刷新界面
KIKIguo的博客
08-28 473
当使用el-form时， 如果只包含一个el-input时，按下回车表单的默认提交事件。在el-form中使用@submit.native.prevent就可以阻止回车事件。使用el-input搜索功能，点击enter键会刷新界面。
使用el-input回车会刷新页面
梦雨的博客
08-18 898
当使用Form组件中只有一个Input组件时，输入后点击回车会出现刷新页面现象，我们可以通过阻止表单的默认提交行为来解决问题。
el-input按回车 界面自动刷新
只会写bug
08-23 889
先解释一下时间冒泡（Event Bubbling）是事件处理的一种机制，它描述了事件从最具体的元素（如一个按钮或链接）开始，然后逐级向上转播至不那么具体的节点的过程。在事件冒泡过程中，当一个事件在一个元素上触发时，该事件会首先在这个元素上触发。如果这个元素的父元素也注册了器来处理相同的事件，那么这个事件也会在这个父元素上触发。这个过程会一直持续到事件到达文档的根节点为止。事件冒泡是一个非常有用的概念，因为它允许您在一个较高的层次上处理事件，而不是在每个可能的元素上都设置事件处理器。
el-input-number回车会刷新页面
09-14
如果你希望阻止回车键触发表单提交事件并刷新页面，可以使用事件修饰符或 JavaScript 来阻止默认行为。 例如，你可以使用 `@keydown.enter.prevent` 事件修饰符来阻止回车键触发表单提交事件： ```html <el-input-...
el-input相关问题解决
HZM_CSDN的博客
07-29 765
但是有时候会同时触发刷新页面，这样可以在el-form上添加@submit.native.prevent来解决。2.使用回车键enter来进行登录，在登录按钮上面添加native-type=“submit”1.当只有一个el-input的时候，可以用elementUI的自带的回车键触发提交事件。vue+elementUI的el-form的回车键登录，监听键盘来触发事件。3.监听键盘来触发登录事件。...
vue+elementUI el-form 查询导致页面刷新
qq_29236119的博客
03-10 855
1、列表点击查询条件返回具体的内容，当输入查询条件按下回车或者是点击查询按钮时候发生页面刷新，并没有去查询，很是费解，其他页面就没有这种情况，然而最后发现导致问题发生的原因竟是当表单只有一个文本框时，查询会触发表单提交事件，导致页面刷新，代码如下： <el-form :inline="true" :model="dataForm" @keyup.enter.native="getSearchDataList()"> <el-form-item label="宠物名称">
el-form坑之el-input第一次回车会刷新页面
itsxyu的博客
01-18 442
现象：el-input在绑定@keypress.enter.native后，第一次回车时会刷新页面，后面在回车就不会了。 原因： W3C 标准中有如下规定： When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form. 即：当一个 form 元素中只有一个输入框时，在该输入框中按下
el-input 使用 回车键会刷新页面的问题
qq_22187895的专栏
08-14 1590
使用el-input的时候，光标聚焦在输入框，按下回车，会刷新页面。这是因为当el-form表单中只有一个input时，按下回车建会自动触发页面的提交功能， 产生刷新页面的行为。如下代码，在 el-form 中 加个 @submit.native.prevent，就可以了，form表单内多增加一个元素，不占据位置即可。.prevent 提交以后不刷新页面。.native 绑定系统原生事件。@submit: 表单提交。
解决vue3中el-input在form表单按下回车刷新页面
蜗牛~~
07-16 569
解决方法 ： 再给一个input 表单 将其设置style="display:none"中只有一个input 框则按下回车会直接关闭表单 所以导致刷新页面。点击回车之后 刷新页面。
el-input回车会自动刷新页面原因及解决方法
qq_43631129的博客
04-28 1413
el-input回车会自动刷新页面原因及解决方法
el-input 回车键刷新页面问题的解决
X_iao_yun的博客
01-28 392
【代码】el-input 回车键刷新页面问题的解决。
解决Element-plus 给el-input 添加回车事件会刷新页面的问题
qq_58633408的博客
01-31 1109
组件默认情况下，按下回车键会触发表单的提交，而表单的提交会触发页面的刷新。这是浏览器默认行为。@submit.prevent 就可以阻止浏览器刷新页面的默认行为，问题就成功解决啦！解决之后,按下回车，就出发了正则验证，没有刷新页面。然后就按下回车就导致了页面刷新。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值