elementUI-form-阻止表单输入框回车刷新页面

最新推荐文章于 2024-08-02 19:23:43 发布
最新推荐文章于 2024-08-02 19:23:43 发布
阅读量696 收藏
点赞数
分类专栏： elementUI 文章标签： 前端 vue
原文链接：https://blog.csdn.net/weixin_40425415/article/details/107687340
版权

原因：

当form表单中只有一个input输入框的时候，键盘回车事件就会刷新页面，因为form表单把这个事件当成了是提交表单的操作

解决：

两种方法：

  1. 再写一个type为hidden的input标签

  2. 在el-form中写一个属性：@submit.native.preven

学海无涯，真的无涯
关注
专栏目录
Vue.js：element-ui组件库el-form表单el-input输入框按下回车键会刷新页面的问题
彭世瑜的博客
04-29 1268
当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------form组件（2），Switch 开关-----Form 表单
weixin_45343884的博客
08-08 3094
（7）Switch 开关 基本用法—绑定v-model到一个Boolean类型的变量。可以使用active-color属性与inactive-color属性来设置开关的背景色。 <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"> </el-switch> &l...
vue 解决form表单提交但不跳转页面的问题
10-16
今天小编就为大家分享一篇vue 解决form表单提交但不跳转页面的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
阻止form表单回车提交刷新页面
做一个有知识的流氓
10-31 630
【代码】阻止form表单回车提交刷新页面。
element ui 回车提交查询并阻止默认提交表单
最新发布
墨离的博客
08-02 344
使用element ui 做表单提交的时候，回车会自动提交表单，但是有时候由于需求的原因，我们希望回车的时候禁止整个表单的提交，并且执行我们想要的需求，那么我们可以在 <el-form>即：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在。@keyup.enter.native="onSearch"来实现我们自己的逻辑。下面是element ui文档原文。W3C 标准中有如下。
Element-ui阻止表单输入框回车刷新页面
Wnig's Blog
08-22 401
在只有一个输入框el-input的时候，会刷新页面 解决办法： 在 el-form 上加上 @submit.native.prevent 就可以阻止表单回车提交 <el-form @submit.native.prevent></el-form> ...
vue中在弹框中使用form表单，取消默认的回车提交效果-刷新页面
浩星
09-07 1253
vue项目中使用dialog弹框的时候，如果在弹框上使用form表单，但是我们只是使用他的input框，不需要它默认的提交功能的时候，会出现input聚焦，回车刷新页面，是因为他触发了默认的form提交方法。解决办法，可以js动态禁止回车，也可以去掉默认的提交。
el-form中一个输入框的回车事件，怎么屏蔽
qq_43436008的博客
01-19 470
el-form中一个输入框的回车事件，怎么屏蔽 加上下面这一行 <el-form :inline="true" @submit.native.prevent>
如何防止INPUT按回车自动提交表单FORM
11-29
在网页设计中，表单（`<form>`）是用户与服务器进行交互的重要元素，而输入框（`<input>`）则是用户输入数据的主要界面组件。然而，浏览器默认的行为是，当用户在单个输入框中按下回车键时，会触发表单的提交事件。...
JSP中的FORM表单中只有一个input文本时，按回车键将会自动提交表单
01-08
在JSP中，当一个FORM表单中只有一个INPUT文本输入框时，用户按下回车键，浏览器会默认触发表单的提交动作。这是因为浏览器的默认行为：在一个只有一个单行文本输入域（type="text"）的表单里，按下回车键会模拟点击...
Form表单按回车自动提交表单的实现方法
11-28
1.form表单中只有一个input标签,按回车键将自动提交表单 当form表单中只有一个<input type=”text” name=’name’ />时按回车键将会自动将表单提交。 <form id='form1' action='a1.jsp' method='post'&gt...
el-form表单-解决按下回车页面刷新
m0_65039133的博客
06-12 682
刷新原因：在element-ui中，el-form中只有一个el-input时，按下回车会刷新页面。解决办法：给el-form添加@submit.native.prevent属性。
阻止form表单回车自动提交
m0_38038767的博客
09-08 2515
方法一： 在form标签中添加οnsubmit="return false;"，例如 <form class="" action="" onsubmit="return false;"></form> 方法二： 为要阻止回车提交的input标签添加οnkeydοwn属性，例如 <input onkeydown="if(event.keyCode == 13){ret...
阻止 form 回车 自动提交
weixin_34306446的博客
09-14 739
问题:当form表单中只有一个input时,在input中按回车键会自动提交. 解决方案: 　　1.form元素上加onsubmit="return false"(推荐) 　　2.多个input存在时按回车不会自动提交(注意:表单中有提交按钮的话,该方法不行) 　　3.给input绑定onkeydown事件 代码: 　　方法一: 　　　　form元素上加onsubmit=...
form表单回车自动提交（禁止）
没伞的孩子就得跑的专栏
02-05 1549
今天写了一个登录界面，测试的时候发现在任意一个输入框内键入回车之后表单就提交了。但是很明显在未输入完全的情况下是不应该允许提交表单的。那么原因到底是什么呢？ 其实，原因很简单。由于我在写按钮的时候一不小心就在<input>标签内加了一个type="submit"。就是这么一个属性导致了在任意一个输入框内键入回车表单就自动提交了。 解决方法也很简单： 第一：自己写一个按钮，自己写js去处理点击事件。
HTML form 避免(回车)表单自动提交
kungfu_panda的专栏
09-20 3649
1、JavaScript提交表单代码 document.forms["myform"].submit(); or document.myform.submit();//myform为表单名
解决Element表单回车提交会刷新页面的Bug
白瑕 的博客
09-22 906
解决Element表单回车提交会刷新页面的Bug
解决element-ui 表单from回车会刷新整个页面问题
weixin_40425415的博客
07-30 1002
原因： 当form表单中只有一个input输入框的时候，键盘回车事件就会刷新页面，因为form表单把这个事件当成了是提交表单的操作 解决： 1.再写一个type为hidden的input标签 2.在el-form中写一个属性：@submit.native.preven ...
禁止/启用Enter回车键提交表单
likingsn的技术专栏
05-07 2196
form表单里面，敲回车键Enter的时候form自动提交，执行了form.submit()。但是，有时候我们希望禁止按回车键Enter提交表单。 1.禁止回车键提交表单的方法，是为from的onkeydown事件添加js响应代码，如下： 2.启用回车键提交表单，绑定js函数 function keydown() { if (eve
阻止回车提交表单的JavaScript解决方案
在网页开发中，用户在表单中按下回车键通常会导致表单自动提交，这在某些情况下可能不是我们期望的行为。为了防止这种情况，我们可以利用JavaScript来阻止回车键触发表单的提交动作。这里我们将详细介绍几种方法来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值