首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >回车提交表单

回车提交表单

作者头像
阿超
发布于 2022-08-17 11:49:18
发布于 2022-08-17 11:49:18
4.8K00
代码可运行
举报
文章被收录于专栏:快乐阿超快乐阿超
运行总次数:0
代码可运行

却是平流无石处,时时闻说有沉沦。——唐•杜荀鹤

我们在页面开发中经常会写一些表单,但身为一个懒人,肯定是懒得点提交按钮的,我一般直接按回车提交

当我们的form满足只有一个input的时候,回车事件是生效的

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<form>
	<input/>
</form>

当我们的form有多个input的时候,回车事件失效了

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<form>
	<input/>
	<input/>
</form>

此时我们可以加一个input,让type=submit

即可再次满足回车提交效果

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<form>
	<input/>
	<input/>
	<input type="submit"/>
</form>

如果要隐藏掉,使用样式display:hide隐藏即可

但有时如果我们如果需要回车不提交表单,则可以避免上述条件

如果想要不执行submit事件,可以直接在form上加一个onsubmit="return false"即可

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<form onsubmit="return false">
	<input/>
	<input/>
	<input type="submit"/>
</form>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-08-18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Blazor-表单提交的艺术:如何优雅地实现 (上)
下面我将从三个方面来说说Blazor的表单提交方法,从原始的HTML表单提交方法,到Blazor的两种模式的提交方法进行描述,供大家了解。
MaybeHC
2025/06/08
400
Blazor-表单提交的艺术:如何优雅地实现 (上)
form表单添加验证码并当验证通过后再提交表单
意思就是,form表单中添加一个验证码验证,然后当点击提交时先核验验证码是否正确,如果正确再提交数据,否则不提交。
岳泽以
2023/04/27
1.8K0
事件绑定(onsubmit)表单提交
说明: 上述通过表单提交的方式为GET提交,在后续的内容中我们会详细讲解,GET与POST之间的区别。
GeekLiHua
2025/01/21
1520
事件绑定(onsubmit)表单提交
JavaScript 学习-42.jQuery 提交表单 submit() 方法
前言 submit() 方法不带参数,就是触发 submit 事件,带function 参数,就是执行 submit 事件时运行的函数。 触发 submit 事件 通过 jquery 的submit() 方法,可以出发submit 事件 form表单示例 <form id="demo" method="get"> <div> <label for="user">用户名:</label> <input type="text" id="us
上海-悠悠
2022/06/07
2.1K0
JavaScript 学习-42.jQuery 提交表单 submit() 方法
form表单提交的几种方式
完成后启动项目 并访问http://localhost:8080/query.html 输入用户名和密码
全栈程序员站长
2022/07/21
7.2K0
form表单提交的几种方式
快来使用 React-Hook-Form 搭建强大的React表单
在React中构建表单时,必须使用一个表单库,该库提供了许多方便的工具,而且不需要太多代码。
前端修罗场
2022/07/29
4.1K0
如何防止表单重复提交
在看Java Web 深入分析时, 看到表单重复提交问题一节, 如下描述如何解决问题:
望天
2018/08/02
3.5K0
如何防止表单重复提交
form实现表单提交的各种方法(表单提交源码)
这种方法实际上是调用了一个javascript函数,使用javacript函数来提交表单,方法就非常多非常灵活了,比如可以把它加入到任意一个标签的onclick事件中:
全栈程序员站长
2022/08/01
6.4K0
防止Web表单重复提交的方法总结
在Web开发中,对于处理表单重复提交是经常要面对的事情。那么,存在哪些场景会导致表单重复提交呢?表单重复提交会带来什么问题?有哪些方法可以避免表单重复提交?
编程随笔
2019/09/11
5K0
防止Web表单重复提交的方法总结
表单提交刷新页面问题
今天开发中遇到了一个问题,刚开始没有头绪,不知道怎样解决,后来静下来一想,搜索下吧,经过搜索相关资料,很好的解决。 <form name="keywordForm" method="post" action=""> <p id="profile_nav"> <label for="profile"> 关键字搜索: </label> <input style="width:80; height:20" type="text" name="keyword" onkeypress="searchKey
wangxl
2018/03/07
2.1K0
表单脚本
刚开始人们使用JavaScript,最主要的目的之一就是表单的验证,分担服务器处理表单的责任。虽然现流行的大部分提交方式是通过ajax,但了解表单,对于ajax方式也是有重大帮助的!所以,大家不要看轻表单。
奋飛
2019/08/15
5.4K0
js – form表单提交不刷新
大家已经发现了, 当我们点击submit提交form表单的时候, 他会刷新一次, 如果不想它刷新的话有下面两种方法:
全栈程序员站长
2022/08/01
16.3K0
HTML防止input回车提交表单
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
奋飛
2019/08/15
4.1K0
前端魔法堂:onsubmit和submit事件处理函数怎么不生效呢?
前言  最近在用Polymer增强form,使其支持表单的异步提交,但发现明明订阅了onsubmit和submit事件,却怎么也触发不了。下面我们将一一道来。 提交表单的方式 表单仅含一个以下的元素时,该元素得到焦点,按回车键,即可发起表单提交。 input[type=text] input[type=password] input[type=email] input[type=url] input[type=tel] input[type=number] input[type=search] 示例: <f
^_^肥仔John
2018/01/18
2.1K0
表单提交中的input、button、submit的区别
1.input[type=submit] 我们直接来看例子: 代码如下: <form> <input name="name"> <input type="submit" value="
新人小试
2018/04/12
4.8K0
表单提交中的input、button、submit的区别
JavaWeb防止表单重复提交的几种方式
(4)、ajax提交加锁 采用ajax方式提交表单时,设置一个布尔变量(true/false),当然其他类型变量也可以。初始时为true可以提交,在前端向服务器发出请求后,服务端响应结果没有回来之前将该值置为false,正常响应时再置为true。
全栈程序员站长
2022/08/04
2.6K0
提交表单与验证表单案例
有如下注册页面,对表单进行校验,如果输入的用户名、密码、手机号符合规则,则允许提交;如果不符合规则,则不允许提交。
GeekLiHua
2025/01/21
6450
提交表单与验证表单案例
from 阻止表单的默认提交事件
注意是onclick内是return func();而不是简单的调用func()函数
kirin
2020/11/19
2.4K0
Angular 2 表单(下)
接下来我们使用 ngModel 进行双向数据绑定,通过监听 DOM 事件,来实现更新组件的属性。
陈不成i
2021/07/26
2K0
表单
在dom中提供了为我们提供了操作表单当中的一些控件的方法,比如说获取,操作还有一些特殊的属性。 获取:表单元素的操作 onchange事件 表单事件:onsubmit onreset
河湾欢儿
2018/09/06
2.4K0
相关推荐
Blazor-表单提交的艺术:如何优雅地实现 (上)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档