iview Form 组件阻止回车提交表单

最新推荐文章于 2025-06-19 07:15:30 发布

原创最新推荐文章于 2025-06-19 07:15:30 发布 · 3.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#阻止回车提交表单 #iView #Form

问题记录专栏收录该内容

20 篇文章

订阅专栏

本文介绍了解决form中单个input回车自动提交的问题。通过两种方法：一是在Input上使用@keydown.native.enter.prevent；二是Form上使用@submit.native.prevent。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述

当 form 中只有一个 input 时回车会自动提交表单，这是浏览器的默认行为。

解决办法

第一种是在 Input 上加 @keydown.native.enter.prevent ="handleEnter"
第二种是在 Form 上加 @submit.native.prevent

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

「已注销」

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue输入框回车页面刷新

日常笔记/总结/系列知识梳理

06-26

5277

问题描述：在vue项目开发时，运用element-ui或者iView组件的Form组件；当Form组件中只有一个Input组件时，鼠标聚焦输入框后，点击回车键，页面就会刷新。例如以下代码： <Form :model="form"> <FormItem prop="username"> <Input v-model="form.username" placeho...

vue脚手架搭建和iview踩坑 "vue": "^2.5.2"

人间草木

01-07

1万+

*****先要安装node.js，使用npm包管理工具 node.js安装方法如下***** https://blog.youkuaiyun.com/shiyaru1314/article/details/54963027 https://blog.youkuaiyun.com/qq_42564846/article/details/82688266 大家都知道国内直接使用 npm 的官方镜像是非常慢的，这里...

参与评论您还未登录，请先登录后发表或查看评论

vue中阻止表单自动提交

逍遥生的博客

12-23

1万+

vue中阻止表单自动提交有时候我们在用vue项目时，肯定会遇到这样的问题，业务中需要用到form，但是点击提交按钮会触发form的默认提交，如果用在form上绑定return false，需要单独写验证函数和接收到数据后对数据的处理函数，这样非常不方便，有没有办法阻止form自己的默认提交，在点击提交按钮或者在输入框聚焦时点回车，我们根据自己的需求处理数据呢？很简单，vue中的@submit....

Vue <textarea>文本域屏蔽回车键默认换行操作

weixin_34234823的博客

04-19

3406

html部分中：给vue组件<el-input>绑定事件时候，要加上native普通的html元素<div>就不需要加 html部分 <el-input class="text" type="textarea" placeholder="请输入您要咨询的问题......" v-model="inputText" :maxlength=...

vue3 + TypeScript +Element Plus 输入框回车事件 @keydown.enter

最新发布

BillKu的博客

06-19

973

特性触发时机按下 Enter 时松开 Enter 时Vue 3 兼容性✅ 直接使用⚠️.native已废弃Element Plus 支持✅ 组件暴露自定义事件❌ 依赖内部透传（不可靠）推荐程度推荐不推荐。

iview 使用Form表单，Input使用Enter回车页面刷新问题

S筱潇S四维Smile

05-11

976

禁止触发form表单的submit事件。在form表单标签加上。

iview中select设置多选可搜索获取写入内容添加回车事件怎么写？？？

熟悉 vue2 vue3 jquery js echarts

06-10

1026

html部分 <Select ref="ref1" @on-query-change="queryChange" v-on:keyup.enter.native="searchWeibo" :label-in-value="true" v-model="setFormItem.myTab" :multiple="true" filterable> <Option v-for="item in BaseTab

使用vue+iview Form组件按enter键阻止页面刷新

冰雪为融的博客

12-05

4632

如果我们在Form组件中嵌套使用Input组件的时候，会有一个小问题，如果我们在一个Form组件中只使用了一个Input组件，当该Input组件获取焦点的时候，我们按enter键，整个页面会刷新解决办法：方法一、 <Form ref="formInline" :model="jigouInfo" inline :label-width="80" @keydown.native.e...

iview组件库中，Form组件里的Input，无法正确绑定on-enter事件

luluan_lin的博客

10-23

1980

问题描述： FORM表单只有一个input的情况下，按回车会刷新页面 iView 版本号 ^3.4.1 操作系统/浏览器版本号 Ubuntu16.04/Chrome 61 window/Chrome 61 Vue 版本号 ^2.6.10 <template> <Form ref="search-form" :model="searchModel" ...

vue表单提交数组_VUE做出带有数据收集、校验和提交功能表单

weixin_39712865的博客

12-21

1440

这次给大家带来VUE做出带有数据收集、校验和提交功能表单，VUE做出带有数据收集、校验和提交功能表单的注意事项有哪些，下面就是实战案例，一起来看一下。示例https://raw.githubusercontent.com/xaboy/form-create/dev/images/sample110.jpg安装npm install form-createORgit clone https://gi...

【知识整理】iview远程搜索选择框，删除后再次打开不显示的bug

qq_19891827的博客

05-11

5443

现在使用iview的远程搜索选择框时需要到了这样一个问题，输入框在一个模态框里，打开模态框删除选择框中的内容时，关闭模态框，再次打开模态框时无法为选择框赋上原来的值。查了很多资料也没找到原因，这应该是iview的一个bug。删除前显示模态框时，远程搜索选择框显示的内容如下图，不了解iview远程搜索输入框的盆友，请移步https://www.iviewui.com/components/selec...

js禁止表单重复提交

10-19

主要介绍了js禁止表单重复提交的方法，避免重复记录带来的问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

阻止form表单提交，和提交时产生的问题总结

2³

08-04

9650

一、首先总结阻止 form 表单提交的几种方法 <button> 提交时，type默认为submit，阻止提交将type改为button，即 type="button" <form action=""> <button type="submit"></button> </form> <input> 提交时，将type改为button，即 type="button" <form action=""> &

防止form表单提交的几种方式

曰业而安的博客

02-04

3377

1. 背景介绍在开发项目中肯可能会出现如下情况： 1. 用户的失误操作，多次点击表单提交按钮 2. 由于网速等原因造成页面卡顿，用户重复刷新提交页面 3. 黑客或恶意用户使用postman等工具重复恶意提交表单 .... 这些情况都会导致表单的重复提交，导致数据重复，增加服务器的压力，甚至会造成服务器宕机，因此要有效防止表单重复提交非常必要。 2. 解...

form表单因某些操作会自动提交并刷新页面，需禁止form的自动提交

一片天空

12-15

4293

一、form表单因某些操作会自动提交并刷新页面测试网页时，发现网页每次都会自动提交，发出请求。经过查找和测试，发现是form表单会自动提交，从而导致页面自动刷新。二、form表单自动提交规则 form表单中只有一个type=text的input（可以有其他类型的表单），在input中按enter键，会自动提交 form表单中有多个type=text的input，且无type=submit的按钮元素，则在input中按enter键，不会自动提交 form表单中有type=su

JS阻止form表单提交

weixin_30423977的博客

01-22

590

当做登陆页面时，JS判断用户名密码为空时需要阻止form表单提交。 <script type="text/javascript"> var a = true; function validate(){ var username = document.getElementById("username").value; var ...

Form表单禁止自动提交

qq_39806817的博客

05-07

480

近期在写一个购票系统，发现form表单的post请求时不做判断就直接提交了，以前一直没注意，好像这个是系统默认行为，可通过在form表单上添加一个对象事件onsubmit，也就是提交表之前调用加以判断是否提交例: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %> <!DOCTYPE html> <html xmlns="http://www.w3

vue---阻止默认表单提交的三种方法

weixin_33721427的博客

10-26

2274

vue在做表单提交的时候，需要用到一些自定义的验证规则，这个时候就需要阻止表单默认的提交方式。方法一：直接阻止 <form id="form" @submit="checkForm" action="" method="post"> 当前组件添加一个提交方法，在提交方法里面做阻止： // 提交测试 checkForm: function (e) { // ...

HTML禁止表单提交方法