解决Enter触发form表单提交的问题

最新推荐文章于 2024-08-13 10:33:00 发布
最新推荐文章于 2024-08-13 10:33:00 发布
阅读量5.5k 收藏 2
点赞数 1
分类专栏： HTML表单 文章标签： form表单提交
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wobuaizhi/article/details/93069017
版权

测试组在测试一个查询列表的时候，发现点击enter键会界面出现报错。

我查了一些资料，发现浏览器在form表单提交这块为我们做了处理。

如果表单里只有一个type=”text”的input，那么点击enter就会触发提交事件

知道规则问题就好解决了

<html>
    <form>
        <input type='text' name='code'>
    </form>
</html>

讲上面这个简单的代码复制到一个新建的html文件中，当输入框获得焦点，点击enter就会发现在地址栏的url后面出现

?code=输入值

这是因为form表单进行了一次提交。

 

解决问题的方法，网上的资料也提供了好几种，记录如下

1，最简单当然是去除form标签，这样就不会有触发提交问题了

2，额外添加一个不展示的input框

3，添加表单属性οnsubmit="return false"

如果没有特殊要求一定使用form标签，那么第一种方式最适合

不然建议使用第三种方式，这样可以从根本上解决问题

 

 

知识使我快乐

IE 下Enter提交表单存在重复提交问题的解决方法
09-04
在网页开发中，表单提交是用户与服务器交互的关键环节，而在Internet Explorer（IE）浏览器中，使用Enter键提交表单时可能会遇到一个常见的问题——重复提交。这可能导致数据库中的数据异常，对业务逻辑造成影响。...
layui插件表单验证提交触发提交的例子
10-16
我们不仅学习到了基本的表单验证规则定义，还学习到了如何处理表单的提交事件以及如何通过JavaScript触发表单提交。这些技能对于开发具有用户交互性的Web应用程序至关重要。希望本文的内容能够帮助到正在使用layui...
如何防止INPUT按回车自动提交表单FORM
11-29
form中的input只有一个，input获得焦点时按回车会form自动提交： <!doctype html> <html> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <form action="http://blog.csdn.net/gnail_oug" method="post"> <!--input获得焦点后按回车form自动提交--> <input type="text"> </form> </body> </html> 有多个input时(不管是否是隐藏的)，任意一个input获得焦点都不会提
阻止Form表单按Enter提交
Senye_ing的博客
04-13 239
阻止Form表单Enter提交。
el-form表单输入框回车事件导致页面刷新问题解决
最新发布
q1740706590的博客
08-13 515
在项目中使用form表单时只有一个输入框，输入框绑定了回车触发提交事件，但输入内容按回车时并未执行事件函数，反而刷新页面。
layui的form表单提交问题
weixin_51964457的博客
05-20 7594
layui表单
【form 表单】提交表单数据；文本框按下回车自动触发表单提交、输入框宽度自适应长度
花铛
04-25 645
按下提交按钮，浏览器将自动发出请求，携带输入的数据跳转到 action 指定的页面。
在input框按enter键会自动提交form表单
piaojiancong的博客
01-30 1316
最近在改一个bug，在一个input框内按enter键，页面抛出一个空指针的错误。翻阅代码，并没有发现对应的enter时间提交from表单的代码处理。这就很神奇。因为form表单必须存在，如果要去掉form表单的话改动太大。所以就直接在input框内判断是否按了enter键，如果按了enter键则取消按键，并阻止事件的继续执行。onkeydown="if(event.keyCode==13){ev...
JSP中的FORM表单中只有一个input文本时，按回车键将会自动提交表单
01-08
在JSP中，当一个FORM表单中只有一个INPUT文本输入框时，用户按下回车键，浏览器会默认触发表单的提交动作。这是因为浏览器的默认行为：在一个只有一个单行文本输入域（type="text"）的表单里，按下回车键会模拟点击...
form表单中去掉默认的enter键提交并绑定js方法实现代码
10-27
在网页开发中，`<form>` 表单是用于用户输入数据的重要元素，而`Enter`键通常是用来触发表单的默认提交行为的。然而，有时候我们可能希望阻止这一默认行为，转而自定义`Enter`键的功能，比如通过JavaScript绑定特定...
如何防止回车(enter)键提交表单
F2Zf的博客
04-17 5195
原文地址:http://www.jb51.net/article/50006.htm 如何防止回车（enter）键提交表单，其实很简单，就一句话。onkeydown="if(event.keyCode==13)return false;"把这句写在from标签里面就好了。 如果在页面中按Enter键会自动提交的话，可以设置返回值防止自动提交如返回值必须是false  复制
Form表单 回车(Enter)提交表单问题
qq_37609418的博客
06-15 8283
在Form表单中input会自动响应回车事件。这是表单的默认提交动作。表单的提交行为，可以用两种方式定义，一是form表单自身，二是form表单的button元素(包括type='submit’的input标签，以及type=‘submit’的button元素，button元素type为Submit)。而点击Enter键会触发form表单提交。这被称为隐式提交，如果要阻止回车键提交表单，可以在form标签内添加如下代码 ng-keydown 指令不会覆盖元素的原生 onkeydown 事件, 事件触发时，n
记录form表单提交,解决验证失效
重燃小窗
09-05 1132
在完善suggest功能的时候,遇到一个问题:form表单异步提交成功后应该让页面跳转到首页,但实际上页面只是刷新了但并未跳转. 起初的实现方式将提交按钮的类型设置成了button,通过onclick方法实现ajax提交并跳转页面 <form id="contact_form" class="cd-form floating-labels" method="post"> &lt...
form表单回车提交问题
weixin_30823227的博客
11-12 79
最近发现在form里的一个input敲击回车键时会提交form表单。查了资料，发现会出现这个情况的原因是浏览器帮我们做了处理。这里总结几条规则： 1.如果表单里有一个type=”submit”的按钮，回车键生效。 2. 如果表单里只有一个type=”text”的input，回车键生效。 3. 如果按钮不是用input，而是用button，并且没有加type，IE下默认为type=butt...
form 表单提交input信息 回车报错405
x_Fledgling的博客
05-02 2080
添加onsubmit="return false;"可以让form不自动提交
ant.design reat form组件.回车提交数据
小漠007的专栏
06-12 1262
【代码】ant.design reat form组件.回车提交数据。
form表单回车提交问题（转）
java？
01-11 112
我们有时候希望回车键敲在文本框（input element）里来提交表单（form），但有时候又不希望如此。比如搜索行为，希望输入完关键词之后直接按回车键立即提交表单，而有些复杂表单，可能要避免回车键误操作在未完成表单填写的时候就触发了表单提交。 要控制这些行为，不需要借助JS，浏览器已经帮我们做了这些处理，这里总结几条规则： 1. 如果表单里有一个type=”submit”的按...
antd输入框禁止回车
马优晨
04-01 3819
问题： 比如这里，我输入一个淘宝账号名：结果按回车，就触发了 冒泡。 处理办法： const preventBubble = function (e) { e.preventDefault(); }; <Item label="淘宝账号名"> {getFieldDecorator('taobaoNick', { rules: [ { required: true, message: '请输入淘宝账号名'
form表单提交之Enter提交
weboof的博客
07-26 4395
通常情况下，我们在页面上操作输入框的时候，像搜索框，登录的时候，我们一般输入完成后喜欢直接enter去获取结果，然而尴尬的是当我们在注册的时候，则不喜欢每填完一个内容就enter提交了。其实根据业务的不同需要，需要我们去判断，在这之前需要我们去了解一下浏览器的一些默认行为，以下是总结的经验，亲测，可用。 如果表单里只有一个type=”text”的input，不管按钮是什么type(或有无提交按钮)，
阻止回车提交表单的JavaScript解决方案
"如何防止回车(enter)键...要防止回车键提交表单，可以通过监听键盘事件并在事件处理函数中检查`event.keyCode`，当检测到回车键时阻止表单提交。这种方式允许你在保持用户体验的同时，对表单提交行为进行自定义控制。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值