el-form 输入框回车会自动提交的问题

最新推荐文章于 2024-06-20 20:06:05 发布
最新推荐文章于 2024-06-20 20:06:05 发布
阅读量1.7k 收藏
点赞数
文章标签： html vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenxiyuxiao/article/details/120697038
版权

1、问题描述及触发条件

  • 当el-form中 有且只存在一个input时 在这个input中回车会触发默认提交事件，可能会改变网址，导致在地址中的参数发生改变造成报错。
  • 另：注意是只存在有一个input时，才会触发，其中el-date，el-select底层都是input，存在el-input和el-select、el-date时不会触发，存在el-input、el-checkbox-button时则会触发。

2、解决方法

  • 在el-form中添加 @submit.native.prevent 阻止表单默认提交事件 

3、参考网址

elementui el-form 支持回车提交_asing1elife's blog-CSDN博客

chenxiyuxiao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【element】 el-form一个input框按回车enter会默认提交表单处理--@submit.native.prevent
jieweiwujie的博客
10-28 1615
<template> <div class="home"> <div id="nav"> <el-form @submit.native.prevent> <el-input v-model="inputVal" @keyup.enter.native="showFun"></el-input> </el-form> </div> .
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
10-15
在本场景中，使用了Element UI库的`el-form`组件来构建表单，它提供了丰富的表单元素和表单验证功能。在实现添加和编辑功能时，一个常见的挑战是如何在表单提交后清空数据，以便用户可以进行下一次操作，比如添加新...
el-form表单，按下回车后刷新页面的问题
猿始森林
03-29 391
当你的表单只有一项时，按下回车默认会提交表单，所以会出现刷新页面的现象。如上，指定回车或提交的事件，就可以避免刷新页面的问题。
[element-ui]el-form+el-input解决回车自动提交表单问题
xxuxioxx的博客
12-12 1399
form 表单只有一个input 时，回车自动提交表单造成页面刷新效果
el-form下单个el-input文本框回车触发提交刷新的问题
最新发布
wzzjswx的博客
06-20 175
今天在写一个信息搜索栏时,就是一个简单的 el-dialog 弹窗,里面只有一个 el-form 表单 和一个 el-input 文本框.另外在歪一下楼.简单说下 el-input 的这两种事件区别,在输入框内分别添加两个事件并进行日志输出.出现的效果如下.接着翻了下 el-form 文档,有个关于这个问题的特别提示.(只有一个文本框会出现该问题,两个就没有)当焦点在文本框内时,按下回车键,会触发表单提交并刷新页面.
elementui el-form 默认不支持回车提交，怎么解决
Shelly Long的博客
12-06 1886
概念： 1.在表单的提交按钮上添加 Vue 原生属性native-type="submit"可以让按钮变为表单提交按钮； 2.阻止表单默认提交事件（默认是阻止），在表单上（即<el-form>标签上）添加@submit.native.prevent即可 3.因为el-form默认不支持表单回车提交，在表单上（即<el-form>标签上）添加@keyup.ent...
form表单的单输入框回车出现同步提交事件处理
wzp20092009的博客
02-22 2466
form表单中如果只有一个输入框，在输入时按Enter回车键会出发默认事件自动提交表单，该交互是同步发生的，会导致页面刷新。
el-form里面只有一个el-form-item的时候，在输入框中按下回车键Enter会自动提交表单并且刷新网页，如何屏蔽这种情况？
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
06-01 705
当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在。@submit.native.prevent //主要是这句话加上去就可以屏蔽回车提交刷新网页了。
el-form 多层级表单的实现示例
10-14
主要介绍了el-form 多层级表单的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
el-table嵌套 el-form并且加正则校验
06-15
el-table 封装组件
el-form-renderer:data数据驱动的动态复杂表格解决方案
04-28
形式呈现器目录灵感贡献贡献者执照 介绍 什么el-form-renderer基于element-ui ，但不限于element-ui组件。 在完全继承element-ui的form属性的基础上，进行了扩展。 一些非形式的组件或自定义组件（例如图片上传和RTF...
Vue中el-form标签中的自定义el-select下拉框标签功能
10-15
在Vue.js框架中，`el-form` 是Element UI库中用于创建表单的组件，它提供了丰富的表单处理功能，如验证、响应式布局等。`el-select` 是`el-form` 中常用的组件，用于创建下拉选择框，用户可以在预设的选项中进行选择...
el-form表单回车提交，浏览器会刷新页面
DazzlingPing的博客
12-14 784
el-form回车 刷新页面
VUE页面常用处理技巧汇总随记（1）--el-form回车提交
jelin1230的专栏
05-13 189
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px" > </el-form>
elementui el-form 支持回车提交
qq_35943376的博客
03-05 849
实现方式 在表单的提交按钮上添加 Vue 原生属性 native-type=“submit” 可以让按钮变为表单提交按钮 当表单中只有一个输入框时，按钮会默认为提交按钮 设置默认的提交按钮后需要阻止表单默认提交事件，在表单上添加 @submit.native.prevent 即可 &lt;el-form ref="form" :model="user" :rules="rules" class...
element-ui的form表单中，阻止input输入框回车提交
qq_24133535的博客
04-19 2142
现象：当form表单中只有一个el-input时，在input中回车时会触发表单提交（页面刷新） 解决方法：给form表单添加 @submit.native.prevent <el-form :model="form" ref='form' @submit.native.prevent> </el-form>
element-ui中el-form表单验证，只有点击提交按钮时才进行校验
唐唐唐行的博客
04-04 3526
element-ui中el-form表单验证，只有点击提交按钮时才进行校验
element form 表单默认提交
weixin_45474673的博客
02-07 1522
element ui form 表单默认提交 <el-form ref="create_Form" :model="create_Form" :rules="create_rules" :hide-required-asterisk="true" @submit.native.prevent> @submit.native.prevent 阻止表单的默认提交行为 :hide-required-asterisk=“true” 必填前面的 * 是否隐藏 表单内部的input enter会造成表提交或
element的form表单自动提交
weixin_55582221的博客
01-06 2563
目前的页面效果是这样的，但是有一处的操作很奇怪，就是经常习惯性摁enter键提交表单，但是现在没有实现这个效果。 于是去element关网上搜了搜，发现并没有类似的函数 又去vue官网上看了看，发现了这个函数 于是在代码中在form表单的标签上添加了@keyup.enter.native="submitForm"，submitForm是这个表单的提交函数。 <el-form ref="form" :model="formData" :rules="rules" inline-me...
怎么设置el-form-item里面的el-input输入框必填？
03-31
你可以在el-form-item里面的el-input输入框中添加一个属性 "required"，这样它就会被设置为必填项。例如： ``` <el-form> <el-form-item label="Username" prop="username" required> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="Password" prop="password" required> <el-input v-model="form.password" type="password"></el-input> </el-form-item> </el-form> ``` 在上面的例子中，"required"属性被添加到了el-form-item中的el-input输入框中，这样它们就被设置为必填项了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值