如何阻止vue的form表单在按下回车时自动提交表单

最新推荐文章于 2024-09-11 13:17:30 发布
最新推荐文章于 2024-09-11 13:17:30 发布
阅读量1.4k 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chaochao2222/article/details/129422947
版权

vue的form表单中有时候,需要在文本框进行回车换行输入内容时,会被直接提交,想要阻止按回车键提交表单需要删除@keyup.enter.native="dataFormSubmit()"属性

原来的,按回车会提交

    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="80px"
    >

删除后,按回车不会提交

<el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      label-width="80px"
    >

chaochao2222
关注
Vue.js：element-ui组件库el-form表单el-input输入框按下回车键会刷新页面的问题
彭世瑜的博客
04-29 1367
当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】Vue+ElementUI 中表单按下enter自动提交
主、Lantu的博客
04-23 1442
问题： 我想要输入enter，自动提交 解决方案： @keyup.enter.native="你的提交处理函数" <!-- 修改参数的对话框 --> <el-dialog :title="'修改' + titleText" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed"> <!-- 修改参数的对话框 --> <el-form :mo
禁止按回车键提交表单的方法
12-01
出现自动提交的情况，有两种可能： 一是编写了javascript代码，当用户点按Enter键时，通过js事件侦听机制触发表单的提交。 二是利用了浏览器的默认行为（至少发现ie是这样的）。浏览器在解析网页的时候，有许多默认的行为，例如如果一个页面上有表单和一个提交按钮，那么打开页面时，焦点会自动落在这个提交按钮上面。同样如果一个表单中只有一个单行文本输入域（text），那么在这个输入域中按Enter键时，浏览器会自动提交该表单。 我们对于第一种情况一般都知道而且很容易理解，但是对于第二种浏览器的默认行为，可能知道这一点的人就比较少了，下面我具体看一下浏览器（至少ie如此）在表单提交上的默认行为。
vue 表单阻止默认提交、回车操作
qq_26642611的博客
02-21 2741
@submit.native.prevent 阻止默认提交，添加在form标签上 @keyup.native.enter 回车操作，添加在input标签上
Vue3:回车键实现提交功能
最新发布
weixin_73060959的博客
09-11 800
在 Windows 键盘上，meta 键是 Windows 键 (⊞)。在 Sun 微机系统键盘上，meta 是钻石键 (◆)。在某些键盘上，特别是 MIT 和 Lisp 机器的键盘及其后代版本的键盘，如 Knight 键盘，space-cadet 键盘，meta 都被标记为“META”。在 Symbolics 键盘上，meta 也被标识为“META”或“Meta”。你可以使用以下系统按键修饰符来触发鼠标或键盘事件监听器，只有当按键被按下时才会触发。事件一起使用时，该按键必须在事件发出时处于按下状态。
(vue)阻止表单输入后回车
nyf_unknow的博客
05-30 506
【代码】(vue)阻止表单输入后回车。
vue 阻止 textarea文本框回车自动提交form表单
azlnhaha的博客
07-20 532
【代码】vue 阻止 textarea文本框回车自动提交form表单。
vue中在弹框中使用form表单，取消默认的回车提交效果-刷新页面
浩星
09-07 1301
vue项目中使用dialog弹框的时候，如果在弹框上使用form表单，但是我们只是使用他的input框，不需要它默认的提交功能的时候，会出现input聚焦，回车刷新页面，是因为他触发了默认的form提交方法。解决办法，可以js动态禁止回车，也可以去掉默认的提交。
vue表单提交数组_VUE做出带有数据收集、校验和提交功能表单
weixin_39712865的博客
12-21 1351
这次给大家带来VUE做出带有数据收集、校验和提交功能表单，VUE做出带有数据收集、校验和提交功能表单的注意事项有哪些，下面就是实战案例，一起来看一下。示例https://raw.githubusercontent.com/xaboy/form-create/dev/images/sample110.jpg安装npm install form-createORgit clone https://gi...
解决vue+element 键盘回车事件导致页面刷新的问题
10-18
在标准中提到，当一个表单内仅有一个单行文本输入框时，用户在该输入框中按下回车键通常会被解释为提交表单的请求。浏览器随后会执行页面刷新或跳转的默认提交行为。 在Vue和Element UI结合使用的场景下，开发者...
表单填写时用回车代替TAB的实现方法
12-09
关键之处在于tabindex，其设计思想是：为每个表单元素设置一个tabindex，其值分别为前一个表单元素的tabindex的值加一，函数的功能就是当用户按下回车键时先将当前tabindex的值加一，而后逐一与每个表单元素的...
如何防止回车(enter)键提交表单
11-30
如何防止回车（enter）键提交表单，其实很简单，就一句话。onkeydown=”if(event.keyCode==13)return false;”把这句写在from标签里面就好了。如果在页面中按Enter键会自动提交的话，可以设置返回值防止自动提交如<input id=”q” name=”q” type=”text” onkeypress=”[removed]return gosearch();”>返回值必须是false 代码如下: function gosearch() { if(window.event.keyCode == 13) { search(); return fal
阻止form表单回车提交刷新页面
lemon_宁萌
08-31 372
form表单记录点，备忘录
阻止回车提交表单
czd327917086的专栏
10-31 857
//阻止回车提交表单 $('form').keypress(function(e){ if(e.which === 13){ return false; } })
js禁止按回车键时表单自动提交
貌似君子的专栏
10-13 7082
//键盘enter事件         document.onkeypress=function(){     if(event.keyCode==13){    return false; }         }
elementUI el-form阻止表单输入框回车刷新页面
StacyMo的博客
10-20 1846
elementUI el-form阻止表单输入框回车刷新页面 回车页面会刷新的原因： 当form表单中只有一个input输入框时，按下回车就会刷新页面，因为form表单把该事件当成了提交表单。 解决方法： 在el-form中添加一个属性： @submit.native.prevent ...
input 阻止表单输入框的回车键触发提交事件
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
07-11 1557
layui组件。 input输入框，阻止回车键触发提交事件。 $("addMylable input").keydown(function (event) { if (event.keyCode == 13) { return false; } })
取消回车自动提交表单
热门推荐
kungfu_panda的专栏
09-20 1万+
1、如果form里面只有一个input type＝text，那么无论有没有submit按钮，在input中回车都会提交表单。如果不想回车提交，需要再加一个input type=text，然后设置display:none. 2、如果form里面多于一个input type＝text，那么必须有一个submit按钮才可以回车提交表单。 按钮可以是input也可以是button，他们应设置t
vue input 回车提交表单
09-08
要在Vue中实现在输入框中按回车键提交表单，可以使用`@keyup.enter`事件来监听回车键的按下事件。以下是一个示例代码： ```html <template> <div> <input type="text" v-model="inputValue" @keyup.enter="submitForm" /> <button @click="submitForm">Submit</button> </div> </template> <script> export default { data() { return { inputValue: '' }; }, methods: { submitForm() { // 在这里触发提交表单的操作 // 例如：发送网络请求或执行其他逻辑 console.log('Form submitted!'); } } }; </script> ``` 在上面的示例中，使用`v-model`指令将输入框的值绑定到`inputValue`属性上。然后，使用`@keyup.enter`事件监听回车键的按下事件，当回车键被按下时，会触发`submitForm`方法。在`submitForm`方法中，你可以执行提交表单的操作，比如发送网络请求或执行其他逻辑。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值