form 表单只有一个input 时,回车自动提交表单造成页面刷新效果

news2024/12/26 22:52:38

现象:el-form 中仅有一个input,input上设置了回车响应事件,首次按回车键后,页面刷新,再次按回车才执行了响应事件

<el-form ref="form" @submit.native.prevent>
        <el-form-item>
          <el-input @keyup.enter.native="onSMSCodeSubmit('form')" >
          </el-input>
        </el-form-item>
</el-form>

先了解一下 form 标签

form表单中只有一个input时,按回车键,会自动提交表单(见1),并且url 多一个问号(见2)

https://www.rfc-editor.org/rfc/rfc1866.txt
(1) 查看目录8.2

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.

在这里插入图片描述(2)查看目录8.2.2
在这里插入图片描述
在这里插入图片描述


如果 form 表单没有指定 action 属性,按回车键,会向当前url提交,实际起到了页面刷新的效果,但是这时提交并没有传表单参数,也就是仅仅只有现url。

所以要解决的问题不是页面刷新,而是取消form 内只有一个input时按回车键的默认提交行为

解决方法

一、干预form表单行为

  • 对于原生form标签,阻止form表单的提交:
    在form标签中添加事件
<form οnsubmit="return false;”>
  • 对于vue中
    取消form表单默认提交行为,可以在 标签上添加 @submit.native.prevent

二、破坏“只有一个input”的条件

增加一个input dom 节点,设置为不显示

<form action="http://www.baidu.com">
        <input type="text">
        <input type="text" style="display:none;">
</form>

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

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

相关文章

C#学习记录——【实例】C#实现OPC Client

最近学习测试用C#开发OPC客户端连接OPC服务器&#xff0c;防止遗忘&#xff0c;记录学习测试结果。 1、OPC基础知识 1.1、OPC概述 OPC是Object Linking and Embedding&#xff08;OLE&#xff09;for Process Control 的缩写&#xff0c;它是微软公司的对象链接和嵌入技术在…

【JavaEE】认识HTTP协议

✨哈喽&#xff0c;进来的小伙伴们&#xff0c;你们好耶&#xff01;✨ &#x1f6f0;️&#x1f6f0;️系列专栏:【JavaEE】 ✈️✈️本篇内容:认识HTTP协议、请求。 &#x1f680;&#x1f680;代码存放仓库github&#xff1a;JavaEE仓库&#xff01; ⛵⛵作者简介&#xff1…

Golang 提取视频中音频,存为MP3格式 | Golang工具

目录 前言 环境依赖 代码 总结 前言 本文提供将视频中音频提取出来存为mp3格式&#xff0c;一如既往的实用主义。 主要也是学习一下golang使用ffmpeg工具的方式。 环境依赖 ffmpeg环境安装&#xff0c;可以参考我的另一篇文章&#xff1a;windows ffmpeg安装部署_阿良的博…

Delphi复制HID、ID门禁卡源码

T5557卡是美国Atmel公司生产的多功能非接触式射频芯片卡&#xff0c;属于125KHz的低频卡&#xff0c;在国内有广大的应用市场&#xff0c;如很多酒店的门禁卡都是使用T5557卡。该芯片共有330bit(比特)的EPROM(分布为10个区块, 每个区块33bit)。0页的块0是被保留用于设置T5557操…

模电学习3. MCU接三极管开关电路简单分析

模电学习3. MCU接三极管开关电路简单分析一、说明二、使用NPN型三极管工作状态分析1. 饱和状态基本要求2. 计算限流电阻R23. IbI_bIb​4. 计算 RbR_bRb​5. 下拉电阻三、使用PNP型三极管工作状态分析1. 示例原理图2. IO输出低电平3. IO输出高电平一、说明 本文演示了一个使用M…

adb调试工具-笔记

adb调试工具adb工具可以在电脑通过终端命令操作安卓手机/模拟器命令&#xff1a;adb shell dumpsys window windows | findstr mFocusedApp该命令是查找程序的包名和界面名让我们打开夜神模拟器&#xff0c;并打开设置界面然后在电脑打开命令行&#xff0c;输入上述查询命令传送…

小红书数据分析网站:2023年如何产出爆文(纯干货分享)

导语&#xff1a; 不懂小红书最近火热的赛道、总是错过爆款打造的节奏……2023年了&#xff0c;相信不少人会发现关于小红书营销种草投放&#xff0c;入门容易&#xff0c;做好难。本文将借助第三方工具为品牌锚定赛道&#xff0c;寻找新风向。 1、行业流量大盘 —— 实时掌握…

Android 进程保活(一)

最近公司项目需求&#xff0c;需要给应用加入进程保活。 这里简述一下需求&#xff0c;由于App应用对接了蓝牙接收实时数据&#xff0c;并且数据量很大&#xff1b; 用户在操作App获取实时数据的时候&#xff0c;不可能一直看着手机屏幕&#xff0c; 这时候手机一般会有黑屏或者…

freertos学习之路1-裸机和rtos的区别

写在最前 由于工作需要&#xff0c;需要开始学习freertos的相关知识&#xff0c;本专题主要记录freertos的相关内容 参考&#xff1a; https://www.bilibili.com/video/BV19g411p7UT 正点原子视频 1. 裸机和rtos的多任务处理 试想一种场景&#xff0c;我们正在打游戏&#xff0…

java基础巩固-宇宙第一AiYWM:为了维持生计,大数据之ElasticSearch【ElasticSearch的概念、关于文档、索引的命令】~整起

ElasticSearch一、ElasticSearch基本概念1.ElasticSearch是什么&#xff1f;从哪来、来干啥&#xff1f;2.ElasticSearch与Solr的对比与选型&#xff1a;3.ES核心概念及相关操作4.ELK&#xff1a;拆箱即用的技术&#xff0c;解压完成就能用5.IK分词器6.ElasticSearch与SpringBo…

字节跳动青训营--前端day6

文章目录前言一、React的历史和应用二、React的设计思路1. ui编程痛点 & 对React的期望2. 组件化3.状态归属问题4. 生命周期三、React&#xff08;hooks&#xff09;1.Virtual DOM(虚拟 DOM)&#xff1a;2. diff算法四、React状态管理库五、应用级框架科普前言 仅以此文章…

spark 内存管理机制与相关参数调优

spark 内存管理 文章目录spark 内存管理spark 1.6 内存管理机制spark 2.0 内存管理机制spark 3.3.1 官方文档spark 内存相关参数调优spark 1.6 内存管理机制 https://0x0fff.com/spark-memory-management 统一内存管理 Spark 1.6 之后引入的统一内存管理机制&#xff0c;与静…

SpringbootAdmin:轻量级的Springboot监控组件,用过的都说好

简介 Springboot Admin是一个管理和监控Springboot项目的组件&#xff0c;分为服务端和客户端&#xff0c;两端通过http进行通信。由于其轻量级的特性&#xff0c;所以特别适合中小项目使用。 其效果图如下&#xff1a; 服务端配置 1&#xff0c;引入Springboot admin和Spri…

3.5 异常

1.概述 异常是一些用来封装错误信息的对象 它由异常的类型、提示信息、报错的行号提示三部分组成 2.异常的继承结构 3.异常的处理方式 当程序中遇到了异常,通常有两种处理方式:捕获或者向上抛出 当一个方法抛出异常,调用位置可以不做处理继续向上抛出,也可以捕获处理异常 大…

简单使用OpenGauss数据库

1 参考网站 # OpenGauss官网 https://opengauss.org/zh/2 Docker安装OpenGauss 下载OpenGauss docker pull enmotech/opengauss:3.0.0安装OpenGauss 容器参数说明&#xff1a; GS_PASSWORD&#xff1a;必须设置该参数&#xff0c;该参数设置了openGauss数据库的超级用户omm…

LeetCode 刷题系列 -- 1110. 删点成林

给出二叉树的根节点 root&#xff0c;树上每个节点都有一个不同的值。如果节点值在 to_delete 中出现&#xff0c;我们就把该节点从树上删去&#xff0c;最后得到一个森林&#xff08;一些不相交的树构成的集合&#xff09;。返回森林中的每棵树。你可以按任意顺序组织答案。示…

多域(跨域)计算「起势」,智能汽车赛道迎来新拐点

多域&#xff08;跨域&#xff09;计算平台正在成为新一轮市场争夺战的焦点。 就在今年CES展上&#xff0c;采埃孚推出多域功能版本的ProAI高性能计算平台&#xff0c;可以在不同的单板上支持基于域的ADAS、信息娱乐以及车身控制功能&#xff0c;并适配不同供应商的系统芯片以及…

前后端分离的陷阱

不管你设计的系统架构是怎么样&#xff0c;最后都是你的组织内的沟通结构胜出。这个观点一直在组织内不断地被证明&#xff0c;但也不断地被忽略。 前后端分离的利与弊 近几年&#xff0c;随着微服务架构风格的引入、前后端生态的快速发展、多端产品化的出现&#xff0c;前后…

vue前端框架应用案例(三)实现简单的echarts柱状图表

目录前端效果展示项目架构Seller.vueSellerPage.vueindex.jsApp.vuemain.jsindex.html后端源程序接口测试本博客内容参考黑马课程&#xff0c;详细信息请参考以下网址 Bilibili官方黑马课程&#xff1a;【echarts数据可视化项目】 前端 效果展示 项目架构 Seller.vue 该部分…

点云双边滤波

双边滤波&#xff08;Bilateral filter&#xff09;是一种非线性的滤波方法&#xff0c;是结合图像的空间邻近度和像素值相似度的一种折中处理&#xff0c;同时考虑空域信息和灰度相似性&#xff0c;达到保边去噪的目的。具有简单、局部的特点。双边滤波器的好处是可以做边缘保…