当前位置: 首页 > news >正文

form表单单输入框回车提交事件处理

问题

form表单中如果只有一个输入框,在输入时按Enter回车键会出发默认事件自动提交表单,该交互是同步发生的,会导致页面刷新。

解决思路

有三种解决思路:

1. 增加input输入框的数量

如果form表单中不止一个input输入框,那么该表单将不会触发表单提交事件。
有时候不一定要增加一个使用的input,我们可以通过增加一个不会显示的出来的input输入框处理。

<form><!-- 原本的输入框 --><input type="text" /><!-- 增加一个不会显示也不会用上的输入框 --><input type="hidden">
</form>

2. 阻止input的回车事件

通过监听input元素的回车事件,如果匹配到回车keyCode就不继续冒泡执行

<form><input type="text" onkeyup="if(event.keyCode==13){return false;}">
</form>

3.直接阻止form表单的表单提交事件

通过监听form元素的表单提交事件,如果返回false将不会触发表单提交事件

<form onsubmit="func(); return false;"><!-- 原本的输入框 --><input type="text" />
</form><script type="text/javascript">
function func() {//	其他处理
}
</script>

针对 vue 的 elementUI 的 el-form 表单提交处理

W3C 标准中有如下规定:

When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.


即:当一个 form 元素中只有一个输入框时,在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为,可以在 <el-form> 标签上添加 @submit.native.prevent

<template><el-form ref="form" :model="form" label-width="80px" @submit.native.prevent><!-- 加上 @submit.native.prevent 阻止默认提交事件 --><el-form-item label="活动名称"><el-input v-model="form.name"></el-input></el-form-item></el-form><el-form-item><el-button type="primary" @click="onSubmit">立即创建</el-button></el-form-item>
</template><script>export default {data() {return {form: { name: '' }}},methods: {onSubmit() {console.log('submit!');}}}
</script>

相关文章:

form表单单输入框回车提交事件处理

问题 form表单中如果只有一个输入框&#xff0c;在输入时按Enter回车键会出发默认事件自动提交表单&#xff0c;该交互是同步发生的&#xff0c;会导致页面刷新。 解决思路 有三种解决思路&#xff1a; 1. 增加input输入框的数量 如果form表单中不止一个input输入框&#…...

c++常用stl算法

1、头文件 这些算法通常包含在头文件<algorithm> <functional> <numeric>中。 2、常用遍历算法 for_each(v.begin(),v.end(), 元素处理函数/仿函数) 注意&#xff1a;在使用transform转存时&#xff0c;目标容器需要提取开辟合适的空间。 void printfunc(…...

非对称密钥PKCS#1和PKCS#8格式互相转换(Java)

目录一、序言二、代码示例1、Maven依赖2、工具类封装三、测试用例1、密钥文件2、公私钥PKCS1和PKCS8格式互相转换一、序言 之前在 《前后端RSA互相加解密、加签验签、密钥对生成》 中提到过PKCS#1格式和PKCS#8格式密钥的区别以及如何生成密钥。实际有些场景中有可能也会涉及到…...

java获取当前时间的方法:LocalDateTime、Date、Calendar,以及三者的比较

文章目录前言一、LocalDateTime1.1 获取当前时间LocalDate.now()1.2 获取当前时间的年、月、日、时分秒localDateTime.getYear()……1.3 给LocalDateTime赋值LocalDateTime.of()1.4 时间与字符串相互转换LocalDateTime.parse()1.5 时间运算——加上对应时间LocalDateTime.now()…...

npm link

正文npm link的用法假如我们想自己开发一个依赖包&#xff0c;以便在多个项目中使用。一种可行的方法&#xff0c;也是npm给我们提供的标准做法&#xff0c;那就是我们独立开发好这个 "依赖包"&#xff0c;然后将它直接发布到 npm镜像站 上去&#xff0c;等以后想在其…...

Docker 如何配置镜像加速

Docker 镜像加速 国内从 DockerHub 拉取镜像有时会遇到困难&#xff0c;此时可以配置镜像加速器。Docker 官方和国内很多云服务商都提供了国内加速器服务&#xff0c;例如&#xff1a; 科大镜像&#xff1a;https://docker.mirrors.ustc.edu.cn/网易&#xff1a;https://hub-…...

阅读笔记7——Focal Loss

一、提出背景 当前一阶的物体检测算法&#xff0c;如SSD和YOLO等虽然实现了实时的速度&#xff0c;但精度始终无法与两阶的Faster RCNN相比。是什么阻碍了一阶算法的高精度呢&#xff1f;何凯明等人将其归咎于正、负样本的不平衡&#xff0c;并基于此提出了新的损失函数Focal L…...

ZCMU--5009: 龙虎斗

轩轩和开开正在玩一款叫《龙虎斗》的游戏&#xff0c;游戏的棋盘是一条线段&#xff0c;线段上有n个兵营(自左至右编号1~n)&#xff0c;相邻编号的兵营之间相隔1厘米&#xff0c;即棋盘为长度为n-1厘米的线段。i号兵营里有ci位工兵。 下面图1为n 6的示例: 轩轩在左侧&#xf…...

创建项目(React+umi+typeScript)

项目框架搭建的方式react脚手架Ant-design官网一、安装方式npm二、安装方式yarn三、安装方式umi devreact脚手架 命令行&#xff1a; npx create-react-app myReactName项目目录结构&#xff1a; 浏览器运行&#xff0c;端口号3000&#xff1a; Ant-design官网 一、安装方…...

FISCO BCOS(二十七)———java操作WeBase

一、搭建fiscobcos环境 1.1、安装jdk1.8 https://blog.csdn.net/weixin_46457946/article/details/1232435131.2、安装mysql https://blog.csdn.net/weixin_46457946/article/details/1232447361.3、安装python https://blog.csdn.net/weixin_46457946/article/details/123…...

失眠时还在吃它?有风险,你了解过吗

失眠&#xff0c;是当代人的通病。所以解决失眠也成了刚需&#xff0c;市面上开始出现各种助眠产品。有商业机构调查发现&#xff0c;62%的90后消费者曾买过助眠产品&#xff0c;其中人气选手就是褪黑素。褪黑素本身就是人体天然存在的&#xff0c;与睡眠有关的物质&#xff0c…...

星戈瑞收藏Sulfo-CY7 amine/NHS ester/maleimide小鼠活体成像染料标记反应

关于小鼠活体成像&#xff0c;就一定要提到CY活性染料标记反应&#xff1a; 用不同的活性基团的Cyanine菁染料和相应的活性基团的生物分子或小分子药物发生反应&#xff0c;链接到一起。 根据需要标记的抗原、抗体、酶、多肽等分子所带的可标记基团的种类&#xff08;氨基、醛…...

守护最后一道防线:Coremail邮件安全网关推出邮件召回功能

根据Coremail邮件安全大数据中心2022年Q4季报显示&#xff0c;2021年CAC识别钓鱼邮件1.81亿&#xff0c;2022年上升至2.25亿&#xff0c;增幅高达24.1%。 这表明2022年平均每天有61万7088封钓鱼邮件被接收及发出&#xff0c;企业用户面临潜在经济损失不可估量。 尤其是活跃至今…...

Python实战之小说下载神器(二)整本小说下载:看小说不用这个程序,我实在替你感到可惜*(小说爱好者必备)

前言 这次的是一个系列内容给大家讲解一下何一步一步实现一个完整的实战项目案例系列之小说下载神器&#xff08;二&#xff09;&#xff08;GUI界面化程序&#xff09; 单章小说下载保存数据——整本小说下载 你有看小说“中毒”的经历嘛&#xff1f;小编多多少少还是爱看小说…...

ChatGPT三个关键技术

情景学习&#xff08;In-context learning&#xff09; 对于一些LLM没有见过的新任务&#xff0c;只需要设计一些任务的语言描述&#xff0c;并给出几个任务实例&#xff0c;作为模型的输入&#xff0c;即可让模型从给定的情景中学习新任务并给出满意的回答结果。这种训练方式能…...

考试系统 (springboot+vue前后端分离)

系统图片 下载链接 地址&#xff1a; http://www.gxcode.top/code 介绍 一款多角色在线培训考试系统&#xff0c;系统集成了用户管理、角色管理、部门管理、题库管理、试题管理、试题导入导出、考试管理、在线考试、错题训练等功能&#xff0c;考试流程完善。 技术栈 Spr…...

ChatGPT告诉你:项目管理能干到60岁吗?

早上好&#xff0c;我是老原。这段时间最火的莫过于ChatGPT&#xff0c;从文章创作到论文写作&#xff0c;甚至编程序&#xff0c;简直厉害的不要不要的。本以为过几天热度就自然消退了&#xff0c;结果是愈演愈烈&#xff0c;热度未减……大家也从一开始得玩乐心态&#xff0c…...

Python自动化测试框架【Allure-pytest功能特性介绍】

Python自动化测试框架【Allure-pytest功能特性介绍】 目录&#xff1a;导读 前言 生成报告 测试代码 目录结构 Allure特性 Environment Categories Fixtures and Finalizers allure.attach 总结 写在最后 前言 Allure框架是一个灵活的轻量级多语言测试报告工具&am…...

ToB 产品拆解—Temu 商家管理后台

Temu 是拼多多旗下的跨境电商平台&#xff0c;平台产品于9月1日上线&#xff0c;9月1日到9月15日为测试期&#xff0c;之后全量全品类放开售卖。短短几个月的时间&#xff0c;Temu 在 App Store 冲上了购物类榜首&#xff0c;引起了国内的广泛关注。本文将以 B 端产品经理的角度…...

Android Studio的笔记--socket通信

Android socket通信Socket协议android socket 代码清单文件开启服务服务端&#xff1a;TCPServerService客户端&#xff1a;TCPClientServicelogSocket Socket 作为一种通用的技术规范&#xff0c;首次是由 Berkeley 大学在 1983 为 4.2BSD Unix 提供的&#xff0c;后来逐渐演化…...

智慧医疗能源事业线深度画像分析(上)

引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

FastAPI 教程:从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)

更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

leetcodeSQL解题:3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中&#xff0c;附加包含目录、附加库目录和附加依赖项是三个至关重要的设置&#xff0c;它们相互配合&#xff0c;确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中&#xff0c;这些概念容易让人混淆&#xff0c;但深入理解它们的作用和联…...

windows系统MySQL安装文档

概览&#xff1a;本文讨论了MySQL的安装、使用过程中涉及的解压、配置、初始化、注册服务、启动、修改密码、登录、退出以及卸载等相关内容&#xff0c;为学习者提供全面的操作指导。关键要点包括&#xff1a; 解压 &#xff1a;下载完成后解压压缩包&#xff0c;得到MySQL 8.…...

Unity中的transform.up

2025年6月8日&#xff0c;周日下午 在Unity中&#xff0c;transform.up是Transform组件的一个属性&#xff0c;表示游戏对象在世界空间中的“上”方向&#xff08;Y轴正方向&#xff09;&#xff0c;且会随对象旋转动态变化。以下是关键点解析&#xff1a; 基本定义 transfor…...