el-form回车页面刷新

最新推荐文章于 2025-04-22 13:24:27 发布
原创 最新推荐文章于 2025-04-22 13:24:27 发布 · 878 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了解决表单中仅有一个文本框时按下回车键会触发表单提交事件的问题。提供了两种方法：一是增加一个隐藏文本框；二是通过JavaScript阻止默认提交行为。

由于当表单只有一个文本框时，按下回车将会触发表单的提交事件， 导致页面的刷新。

解决方法1：
加一个隐藏的文本框，即表单不只有一个文本框

<el-form-item style="margin-bottom:0;display:none;">
 	<el-input></el-input>
</el-form-item>

解决方法2：
阻止form的enter(回车键)事件

<el-form @submit.native.prevent>
	 <el-form-item>
	    	<el-input v-model="aaa"></el-input>
	  </el-form-item>
</el-form>
Vue.js：element-ui组件库el-form表单el-input输入框按下回车键会刷新页面的问题
彭世瑜的博客
04-29 2088
当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 978
1、列表点击查询条件返回具体的内容，当输入查询条件按下回车或者是点击查询按钮时候发生页面刷新，并没有去查询，很是费解，其他页面就没有这种情况，然而最后发现导致问题发生的原因竟是当表单只有一个文本框时，查询会触发表单提交事件，导致页面刷新，代码如下： <el-form :inline="true" :model="dataForm" @keyup.enter.native="getSearchDataList()"> <el-form-item label="宠物名称">
el-form中只有一个表单时，按回车键刷新页面问题
An滴饭儿的博客
04-12 548
当表单中只有一个input，按回车默认是执行提交表单事件，如果是两个input不会出现这个问题。那如何解决呢？ 在el-form上加@submit.native.prevent阻止默认事件。如果需要回车查询数据，给el-input加@keyup.enter.native="queryInfo"属性，其中queryInfo是查询数据的函数。 <el-form ref="form" :model="form" size="mini" :inline="true" @submit.native.preven
el-form表单回车提交，浏览器会刷新页面
DazzlingPing的博客
12-14 950
el-form回车 刷新页面
el-form表单，按下回车后刷新页面的问题
猿始森林
03-29 806
当你的表单只有一项时，按下回车默认会提交表单，所以会出现刷新页面的现象。如上，指定回车或提交的事件，就可以避免刷新页面的问题。
el-form表单输入框回车事件导致页面刷新问题解决
q1740706590的博客
08-13 1262
在项目中使用form表单时只有一个输入框，输入框绑定了回车触发提交事件，但输入内容按回车时并未执行事件函数，反而刷新页面。
elementui el-form 回车页面刷新事件
yun_hou的博客
07-02 5098
问题描述：在提交某项业务时，需要输入一次密码，点击下方确定后提交，但是当el-input有焦点时，按下回车会发生页面刷新事件，url中的参数也被清空。 代码如下： <div class="password ft12"> <el-form> <el-form-item label="签约密码：" label-width="95px" prop="pas...
el-form回车默认刷新页面
02-14
### 如何防止 `el-form` 表单提交时按回车键导致页面刷新 为了防止 `el-form` 中按下回车键后默认刷新页面，可以采用多种方法来处理这个问题。 #### 方法一：使用事件修饰符 `.prevent` 通过在 `<el-form>` 标签...
element-plus el-form 回车刷新页面
03-20
在使用 `Element Plus` 的 `el-form` 组件时，如果按下回车键导致页面刷新的问题通常是由于表单默认提交行为引起的。可以通过阻止事件的默认行为来解决此问题。 以下是具体的实现方法： #### 方法一：通过监听键盘...
el-form 输入框回车时页面刷新
02-14
### 防止 `el-form` 中输入框按回车键时页面自动刷新 为了防止在 Vue 和 Element UI 的 `el-form` 组件中，当只有一个输入框时按下回车键导致页面刷新的情况发生，可以在 `<el-form>` 上监听原生的提交事件并阻止其...
el-form表单-解决按下回车页面刷新
m0_65039133的博客
06-12 827
刷新原因：在element-ui中，el-form中只有一个el-input时，按下回车会刷新页面。解决办法：给el-form添加@submit.native.prevent属性。
搜索表单el-form在输入框回车时导致页面刷新
Ky_Iverson的博客
10-16 877
表单本身存在默认行为，在 HTML 中，表单元素默认是可以被提交的。当你在输入框中按下回车时，浏览器会认为你想要提交该表单，从而触发提交事件，导致页面刷新。因为el-form本质上也是表单所以遵循HTML默认规则。在使用el-form组件时，输入框回车导致页面刷新的原因主要是由于浏览器的默认行为。具体来说，当你在一个表单中按下回车键时，浏览器会尝试提交表单，这会导致页面刷新。
关于输入框按回车自动刷新页面的4个解决方案
逆风的蔷薇
02-02 1459
解决方案 1、直接去除掉form表单，当然这是最简单粗暴的方法。 2、如果一个input会自动提交，那么比较容易想到的是再加一个input。值得注意的是 这里的input不能设置type为hidden，这样一样是不生效的，form一样会认为只有一个input。需要设置成<input type="text" class="form-control" style="display:none">。 3、给input加上回车事件直接return false。在input加上οnkeydο...
el-form里面的input输入框按回车自动刷新页面的问题
最新发布
weixin_61978391的博客
04-22 978
el-input v-model="searchDetailData.Name" placeholder="请输入工作内容" clearable @keydown.native="handleEnter"></el-input>在el-form中，如果只有一个input的话，按回车表单会自动提交，刷新页面。1.只有一个的话直接不用el-form表单；2.给input加上停止回车的事件。来阻止表单的默认提交行为。
解决 el-form 回车触发刷新页面
柒个橙子的博客
10-26 588
当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。 解决办法是在 <el-form> 上添加 @submit.native.prevent 属性 <el-form @submit.native.prevent></el-form>
搞定：el-form el-form-item 下input框回车刷新整个页面
乐于分享，共同成长
01-31 651
搞定：el-form el-form-item 下input框回车刷新整个页面
解决el-form的el-input 输入框按回车页面刷新问题
MoYu的博客
07-25 1821
解决el-form中-el-inpuit输入框按回车后页面刷新问题
el-form表单提交 回车键刷新
qq_33475629的博客
01-11 354
阻止el-form表单提交时，按enter回车键刷新整屏： @submit.native.prevent .native 表示对一个组件绑定系统原生事件 .prevent 表示提交以后不刷新页面 <el-form :model="queryParams" ref="queryForm" :inline="true" @submit.native.prevent> ...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值