【html】输入框里按了一下回车,页面就刷新了,怎么解决?

【html】输入框里按了一下回车,页面就刷新了,怎么解决?

表现

form表单里放了个输入框,聚焦输入框后按了回车键,整个页面被刷新了。
在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 元素中只有一个输入框时,在该输入框中按下回车应提交该表单。
而触发了form的提交,就会导致页面刷新。

解决

阻止form表单的submit
可以在 el-form标签上添加 @submit.native.prevent;
或者在form标签上添加@submit.prevent

代码

使用element

<el-form @submit.native.prevent></el-form>

使用元html

<form @submit.prevent></form>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/231138.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2024年【陕西省安全员C证】考试及陕西省安全员C证模拟试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 陕西省安全员C证考试是安全生产模拟考试一点通总题库中生成的一套陕西省安全员C证模拟试题&#xff0c;安全生产模拟考试一点通上陕西省安全员C证作业手机同步练习。2024年【陕西省安全员C证】考试及陕西省安全员C证模…

竞赛保研 python+opencv+深度学习实现二维码识别

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; pythonopencv深度学习实现二维码识别 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;3分工作量&#xff1a;3分创新点&#xff1a;3分 该项目较为新颖&…

HarmonyOS应用开发实战—开箱即用的登录页面2【ArkTS】【鸿蒙专栏-31】

文章目录 一.HarmonyOS应用开发实战—开箱即用的登录页面2【ArkTS】【鸿蒙专栏-31】1.1 项目背景1.2 ArkTS详解二.HarmonyOS应用开发实战—开箱即用的登录页面2【ArkTS】2.1 ArkTS页面源码2.2 代码解析2.3 心得一.HarmonyOS应用开发实战—开箱即用的登录页面2【ArkTS】【鸿蒙专…

VSCode 常用的快捷键和技巧系列(1)

一&#xff1a;常用快捷键 1、编辑器与窗口管理 打开一个新窗口&#xff1a; CtrlShiftN关闭窗口&#xff1a; CtrlShiftW同时打开多个编辑器&#xff08;查看多个文件&#xff09;新建文件 CtrlN文件之间切换 CtrlTab切出一个新的编辑器&#xff08;最多 3 个&#xff09; Ct…

JWT令牌的作用和生成

JWT令牌&#xff08;JSON Web Token&#xff09;是一种用于身份验证和授权的安全令牌。它由三部分组成&#xff1a;头部、载荷和签名。 JWT令牌的作用如下&#xff1a; 身份验证&#xff1a;JWT令牌可以验证用户身份。当用户登录后&#xff0c;服务器会生成一个JWT令牌并返回…

hping3

Hping3 Hping3的介绍&#xff1a; 是一款网络的测试工具&#xff0c;一般用于网络安全员用来进行防火墙的测试等抗压测试。 Hping3的帮助面板: -h –help显示帮助 -v –version显示版本信息 -c –count 限制发包数 -i –interval nterval 指定发包间隔为多少毫秒&#…

一封来自北京软协的感谢信

日前&#xff0c;北京软件和信息服务业协会&#xff08;以下简称北软协&#xff09;向酷雷曼&#xff08;北京同创蓝天云科技有限公司&#xff09;发来感谢信&#xff0c;以表彰和感谢同创蓝天对北软协及行业的全方位支持和卓越贡献。 作为北软协理事会会员单位&#xff0c;酷雷…

js 高阶(含vue.js)

1、主动触发函数 this.$options.watch.watchOrdersFormPrice.apply(this);//主动触发watchOrdersFormPrice watch:{watchOrdersFormPrice: function(){if( !this.ordersForm.alone_sold_price && this.ordersForm.ginfo.goods_id ){var price_info this.ordersForm.…

汽车销售技巧培训应该学习哪些内容

汽车销售技巧培训应该学习哪些内容 随着汽车市场的竞争日益激烈&#xff0c;汽车销售技巧培训对于提高销售人员的销售能力和服务水平至关重要。本文将介绍汽车销售技巧培训应该学习哪些内容&#xff0c;并结合案例进行分析。 一、产品知识 作为销售人员&#xff0c;了解所销售…

Java 图片文件上传下载处理

Java 图片文件上传下载处理 下载 做这玩意给我恶心坏了 下载 直接访问上传的路径就可以下载图片了。但是我们往往会包一层接口&#xff0c;以流的方式读取 url 的内容然后返回给前端&#xff0c;这么做的优点是&#xff1a; 内网域名转外网域名&#xff0c;做业务校验并且让用…

后端相关随机题目记录(1)

目录 后端相关随机题目记录&#xff08;1&#xff09; 后端相关随机题目记录&#xff08;1&#xff09;Bean的类型以及作用域Bean的生命周期Mysql的底层数据结构RedisHttp和Https区别AOP在项目的应用 自定义注解&#xff1f;请求在spring中的一个流程Nacos与zk的区别SpringMV…

Unity中URP下的菲涅尔效果实现(个性化修改)

文章目录 前言一、我们修正一下上篇文章中&#xff0c;可能遗留的Bug1、N向量 变为 单位向量2、使颜色范围在合理区间 二、实现菲涅尔效果强弱可自定义调节三、修改菲涅尔效果颜色1、在属性面板定义颜色属性2、在常量缓冲区申明该参数3、在片元着色器中&#xff0c;用颜色和菲涅…

Python---进程

1. 进程的介绍 在Python程序中&#xff0c;想要实现多任务可以使用进程来完成&#xff0c;进程是实现多任务的一种方式。 2. 进程的概念 一个正在运行的程序或者软件就是一个进程&#xff0c;它是操作系统进行资源分配的基本单位&#xff0c;也就是说每启动一个进程&#xf…

QT for Android安卓编译环境搭建+首次编译3个大坑

1、安装 编译环境能否搭建成功&#xff0c;主要是看各个依赖软件的版本是否匹配。依赖的软件有3个&#xff1a;JDK、安卓SDK、安卓NDK。 我的qt版本是5.14.1&#xff0c;我亲测以下版本可以成功让编译安卓&#xff1a; QT5.14 JDK1.8.0 安卓SDK26.1 安卓NDK20.1 在QT-&g…

LeetCode 142. 环形链表 II

给定一个链表的头节点 head &#xff0c;返回链表开始入环的第一个节点。 如果链表无环&#xff0c;则返回 null。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表中的环&#xff0c;评测系统内部使用整…

【网络安全】-Linux操作系统—操作系统发展历史与Linux

文章目录 操作系统发展历史初期的操作系统分时操作系统个人计算机操作系统 Linux的诞生UNIX与GNU项目Linux内核的创建 Linux的特点开放源代码多样性社区支持 Linux的应用服务器和超级计算机嵌入式系统桌面系统 总结 操作系统发展历史 操作系统&#xff08;Operating System&am…

Linux之FTP 服务器

一、FTP服务器匿名账户服务器配置 1、测试是否已安装vsftp服务器&#xff1a; 2、启动vsftp服务器&#xff1a; 3、修改vsftp主配置文件&#xff0c;允许匿名登录 4、重新启动vsftpd服务,禁用防火墙 5、打开FTP服务的数据文件存放目录/var/ftp&#xff0c;复制若干文件到该目…

Java小案例-RocketMQ的11种消息类型,你知道几种?(死信消息)

前言 在RocketMQ中&#xff0c;死信消息&#xff08;Dead-Letter Message&#xff09;是指那些在正常情况下无法被消费者消费的消息。这些消息会被存储在死信队列&#xff08;Dead-Letter Queue&#xff0c;简称DLQ&#xff09;中。 死信消息的特性包括&#xff1a; 不会再被…

DC-4靶场

目录 nmap进行主机发现 尝试反弹shell&#xff1a; 进入交互式shell&#xff1a; Hydra爆破jim用户密码&#xff1a; ssh登录charles &#xff1a; 提权&#xff08;三种方法&#xff09;&#xff1a; exim4提权…

智能优化算法应用:基于社会群体算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于社会群体算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于社会群体算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.社会群体算法4.实验参数设定5.算法结果6.…