关于原生的form表单按回车键自动提交的问题。

最新推荐文章于 2023-12-12 16:43:11 发布
最新推荐文章于 2023-12-12 16:43:11 发布
阅读量945 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 我的笔记本 文章标签： form表单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Wtg_wutiegang/article/details/89329743
本文介绍了一个简单的方法来防止HTML表单在用户按下回车键时自动提交。当表单包含多个输入字段时，此行为可能不受欢迎。通过在form标签中添加onsubmit=return false;属性，可以轻松地禁用这一默认行为。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

如果没有引用其他的插件，而且form表单中只有一个input标签时（这里的input标签不包括hidden隐藏域，input标签不能使用其他插件的形式），回车时就会自动提交form表单，多于一个input标签就不会回车自动提交表单。

解决方法：如果要阻止表单回车自动提交那么就可以在form表单中添加一个onsubmit="return false;就行了。

Form 表单回车自动提交问题
qq_36428598的博客
05-17 253
window.event.keyCode==13 代表的就是回车键Enter，意思就是点击回车。给input绑定onkeydown事件。
form表单点击回车或者点击按钮会自动提交表单的问题
syousetu的博客
10-09 1076
问题描述 form表单下 ，点击按钮 或者input中输入回车键 ，浏览器会自动提交表单 解决方案 第一种情况 情景描述 如果按钮不是用input，而是用button，并且没有加type，IE下默认为type=button，FX GOOGLE默认为 type=submit 解决方案 按钮添加属性 type=button 第二种情况 情景描述 form表单中有输入框，输入回车，会自动提交表单 解决方案 写全局监听input的keypress事件，当监听到时回车的时候，return false $("input
Form表单按回车自动提交表单的实现方法
11-28
1.form表单中只有一个input标签,按回车键将自动提交表单 当form表单中只有一个<input type=”text” name=’name’ />时按回车键将会自动将表单提交。 <form id='form1' action='a1.jsp' method='post'> <input type='text' name='name' /> </form> 如果不想让其自动提交可以这样做: 再添加一个<input type=”text”/>按下回车将不会自动提交，但是页面上显示一个不知所云的输入框挺别扭，后从网上搜到两个解决办法： (1) 添加一个<input type=’text’
form表单回车会自动提交和禁止自动提交
www3300300的专栏
09-25 8762
如果form表单内只有一个输入框时,按回车会自动提交的. 我自己的两个解决方案： (1)对输入框增加一个onkeydown属性, onkeydown="if(event.keyCode==13){return false;}" (2)对form表单加一个onsubmit属性,
form表单自动回车提交
weixin_34062469的博客
11-05 141
对于使用了submit按钮的form表单，浏览器会直接建立回车与submit按钮之间的关联
form表单回车会自动提交
chenkai1252的博客
02-12 223
如果form表单内只有一个输入框时,按回车会自动提交的. 我自己的两个解决方案： (1)对输入框增加一个onkeydown属性, onkeydown="if(event.keyCode==13){return false;}" (2)对form表单加一个onsubmit属性,<form ...
按下回车默认提交form表单问题
littleFatty的博客
05-22 420
最近开发中碰到一个问题，项目中有几个列表展示页面，允许用户通过查询条件模糊查询数据。用户录入关键字后点击回车会调用查询方法根据关键字查询，原先功能没有问题，但是最近发现在查询输入框中按下回车会直接刷新页面不调用查询方法。检查发现有人在查询模块新增了一个form表单，找了很多和form表单相关资料才发现当form表单内只有一个type=“text”类型的标签时按下回车默认会提交form表单。解决方法
jsp中如何实现按下回车键自动提交表单
10-21
在JSP（JavaServer Pages）中，实现按下回车键自动提交表单的功能主要依赖于JavaScript，因为HTML本身不提供监听回车键事件的原生功能。以下将详细讲解如何利用JavaScript来完成这一任务。 首先，我们需要理解HTML...
解决vue+element 键盘回车事件导致页面刷新的问题
10-18
在标准中提到，当一个表单内仅有一个单行文本输入框时，用户在该输入框中按下回车键通常会被解释为提交表单的请求。浏览器随后会执行页面刷新或跳转的默认提交行为。 在Vue和Element UI结合使用的场景下，开发者...
表单切换，用回车键替换Tab健(不支持IE)
09-05
通常，用户通过按Tab键在表单元素之间进行切换，但有时我们可能希望用户通过按下回车键来实现这种切换，这样可以提供更友好的交互体验，尤其是对于那些习惯于使用回车键进行确认操作的用户。然而，需要注意的是，这...
javascript判断是否按回车键并解决浏览器之间的差异
10-25
例如，在Web表单中，可以通过回车键提交表单，或者在对话框中按下回车键来确认操作。这时，就需要对可能产生干扰的其他输入方式（比如输入框中的其他字符）进行限制或者忽略。 总结来说，实现跨浏览器的回车键事件...
jquery 扑捉回车键事件代码
10-26
2. 回车键提交多个表单：如果页面上有多个表单，并且希望在不同的表单中使用回车键提交不同的表单，可以通过选择器精确选择目标表单，或者给不同的表单添加不同的类名，然后绑定事件处理器到对应的类。 3. 与表单...
form 回车自动提交问题
cool_rain_man的专栏
12-10 833
我们有时候希望回车键敲在文本框（input element）里来提交表单（form），但有时候又不希望如此。比如搜索行为，希望输入完关键词之后直接按回车键立即提交表单，而有些复杂表单，可能要避免回车键误操作在未完成表单填写的时候就触发了表单提交。要控制这些行为，不需要借助JS，浏览器已经帮我们做了这些处理，这里总结几条规则：如果表单里有一个type=”submit”的按钮，回车键生
form表单按回车键的提交
漠然
05-22 2530
 当form表单中只有一个显示的 input 框时，在输入框中按回车键，将会自动提交表单，如下例： 当焦点在输入框中，按回车键时，会自动提交；有时我们不希望回车自动提交，想使用自己定义的脚本函数提交表单，当按回车键时，自动调用处理函数；此时，增加form表单的onsubmit事件，如下代码： <!-- fu
表单按回车自动提交
星辰大海
04-11 2185
当form表单中只有一个<input type="text" name='name' />时按回车键将会自动将表单提交。 <form id='form1' action='a1.jsp' method='post'> <input type='text' name='name' /> </form> 再添加一个<input type="tex...
[element-ui]el-form+el-input解决回车自动提交表单问题
xxuxioxx的博客
12-12 2440
form 表单只有一个input 时，回车自动提交表单造成页面刷新效果
网页中表单按回车就自动提交的问题总结
默默前行，勿喜、勿悲、一切随缘！
10-30 1893
当form表单中只有一个输入框时，焦点在此输入框中，按回车键将自动将表单提交。 即使不写action，页面也会自动刷新，有时这并不是我们需要的。 如果再次添加一个input框，会怎样？ 焦点在输入框中，按回车键没有提交表单。 如果表单中添加一个submit类型的按钮呢，会怎样？
Form表单 回车(Enter)提交表单问题
qq_37609418的博客
06-15 8783
在Form表单中input会自动响应回车事件。这是表单的默认提交动作。表单的提交行为，可以用两种方式定义，一是form表单自身，二是form表单的button元素(包括type='submit’的input标签，以及type=‘submit’的button元素，button元素type为Submit)。而点击Enter键会触发form表单提交。这被称为隐式提交，如果要阻止回车键提交表单，可以在form标签内添加如下代码 ng-keydown 指令不会覆盖元素的原生 onkeydown 事件, 事件触发时，n
automa绑定表单回车提交
最新发布
01-07
当用户在一个由 `<form>` 包裹着的输入字段内按下回车键时，默认行为即为提交该表单。 对于希望阻止默认行为（比如防止页面刷新），同时又想要利用 JavaScript 或者框架特定的方法处理数据的情况，则可以通过监听...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值