关于el-form表单 内置的input, enter输入参数回车刷新问题

防止el-form表单提交页面刷新：使用@submit.native.prevent
最新推荐文章于 2024-07-25 16:49:51 发布
原创 最新推荐文章于 2024-07-25 16:49:51 发布 · 464 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #vue.js #elementui

文章讨论了在ElementUI的el-form组件中，如何通过添加`@submit.native.prevent`属性来阻止用户在input输入时通过回车键导致整个页面刷新的问题及解决方案。
  • 问题描述：

在el-form内置的input, 输入参数回车整个页面刷新

  • 解决
  <el-form @submit.native.prevent></el-form>
el-form 输入框按下enter实现搜索功能
King Saj
12-06 930
效果: 代码: <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="80px"> <el-form-item label="主题" prop="enterpriseName"> <el-input v-model="queryParams.name" placeholder="请输入主题" cl
Vue.js：element-ui组件库el-form表单el-input输入框按下回车键会刷新页面的问题
彭世瑜的博客
04-29 2065
当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"/> <
element-ui bug踩坑：input不能放到el-form中，不然造成莫名其妙的路由跳转，在el-form中还是用el-button好了
行走的过客
10-13 918
在一个el-form中写入一个input button 点击以后页面自动刷新，因为路由发生了跳转，应该是element-ui的一个bug，将input移出el-form问题解决，以下是触发路由跳转页面刷新的页面写法（vue） <el-form > <input type="image" src="***" ></input> </el-form> ...
el-from表单 点击enter键时 触发搜索
qq_37899792的博客
04-16 611
el-from表单加上 @keyup.enter.native 可以让表单中的所有form-item在点击enter键时，触发搜索。
el-form按下enter键强制刷新页面问题
秋思的博客
07-25 331
根据需求，需要做到按下enter键，实现自动搜索。其他表单都正常，发现有些表单却直接强制刷新页面，因为这些页面的表单中只有一个单行文本输入字段。查看官方文档，发现早有说明。根据官方说明，加上 @submit.prevent，问题解决。文档还是得仔细看啊~~~
form原生表单以及el-from表单阻止表单默认提交事件，上传文件自动提交刷新以及input输入框按下enter键自动搜索的事件
m0_59157023的博客
07-09 640
问题：1.form原生表单以及el-from表单阻止表单默认提交事件2.上传文件自动提交刷新3.input输入框按下enter键自动搜索的事件。
el-form表单单个输入框回车刷新页面
12-29
### 防止 Element UI `el-form` 表单内输入框按回车键时页面自动刷新 为了防止 `el-form` 中单个输入框按回车键时页面自动刷新，可以采用多种方式来处理这个问题。 #### 方法一：阻止表单默认提交行为 通过在 `<el...
vue+elementUI el-form 查询导致页面刷新
qq_29236119的博客
03-10 974
1、列表点击查询条件返回具体的内容，当输入查询条件按下回车或者是点击查询按钮时候发生页面刷新，并没有去查询，很是费解，其他页面就没有这种情况，然而最后发现导致问题发生的原因竟是当表单只有一个文本框时，查询会触发表单提交事件，导致页面刷新，代码如下： <el-form :inline="true" :model="dataForm" @keyup.enter.native="getSearchDataList()"> <el-form-item label="宠物名称">
el-form回车默认刷新页面
02-14
### 如何防止 `el-form` 表单提交时按回车键导致页面刷新 为了防止 `el-form` 中按下回车键后默认刷新页面，可以采用多种方法来处理这个问题。 #### 方法一：使用事件修饰符 `.prevent` 通过在 `<el-form>` 标签...
一个el-form-item中如何设计两个input来输入两个内容
最新发布
08-06
<el-input v-model="form.input1" placeholder="请输入内容1"></el-input> </el-col> <el-col :span="12"> <el-input v-model="form.input2" placeholder="请输入内容2"></el-input> </el-col> </el-row> </...
element-ui 表单 form 回车 enter 触发查询，并禁止在输入框中按回车键会刷新页面
热门推荐
一片天空
08-18 1万+
element-ui 表单 form 回车 enter 触发查询 在 el-form 上添加 @keyup.enter.native="onQuery" vue+elementUI在输入框中按回车键会刷新页面的问题原因： 参考element-ui文档： W3C 标准中有如下规定： When there is only one single-line text input field in a form, the user agent should accept Enter in ...
el-form表单提交 回车键刷新
qq_33475629的博客
01-11 353
阻止el-form表单提交时，按enter回车键刷新整屏： @submit.native.prevent .native 表示对一个组件绑定系统原生事件 .prevent 表示提交以后不刷新页面 <el-form :model="queryParams" ref="queryForm" :inline="true" @submit.native.prevent> ...
el-form表单-解决按下回车页面刷新
m0_65039133的博客
06-12 824
刷新原因：在element-ui中，el-form中只有一个el-input时，按下回车会刷新页面。解决办法：给el-form添加@submit.native.prevent属性。
关于输入框按回车自动刷新页面的4个解决方案
逆风的蔷薇
02-02 1457
解决方案 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 监听回车事件
qq_43327840的博客
07-21 1145
回车监听
el-form回车页面刷新
一名女程序猿的博客
06-17 876
由于当表单只有一个文本框时，按下回车将会触发表单的提交事件， 导致页面的刷新。 解决方法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里面只有一个el-form-item的时候，在输入框中按下回车键Enter会自动提交表单并且刷新网页，如何屏蔽这种情况？
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
06-01 931
当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在。@submit.native.prevent //主要是这句话加上去就可以屏蔽回车提交刷新网页了。
el-form 回车刷新的问题
hongkid的专栏
01-23 556
一开始是加了最后一行即可完成功能，但在后面开发过程中，发现有的表单回车界面会刷新一下，有的不会，相同的东西，怎么就有的会有的不会，后面发现会的都是只有一个表单项的情况会出现。这个就挺坑，你要么全部都会，要么全部会不会，搞个只有一个表单项的时候会，这个一时半会想不到这种内置逻辑。
elementui el-form 默认不支持回车提交，怎么解决
Shelly Long的博客
12-06 2070
概念： 1.在表单的提交按钮上添加 Vue 原生属性native-type="submit"可以让按钮变为表单提交按钮； 2.阻止表单默认提交事件（默认是阻止），在表单上（即<el-form>标签上）添加@submit.native.prevent即可 3.因为el-form默认不支持表单回车提交，在表单上（即<el-form>标签上）添加@keyup.ent...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Webgiserin

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

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

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

打赏作者

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

抵扣说明：

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

余额充值