按下回车默认提交form表单问题

littleFatty littleFatty     2022-09-01     179

关键词:

最近开发中碰到一个问题,项目中有几个列表展示页面,允许用户通过查询条件模糊查询数据。用户录入关键字后点击回车会调用查询方法根据关键字查询,原先功能没有问题,但是最近发现在查询输入框中按下回车会直接刷新页面不调用查询方法。检查发现有人在查询模块新增了一个form表单,找了很多和form表单相关资料才发现当form表单内只有一个type=“text”类型的<input>标签时按下回车默认会提交form表单。解决方法很简单就是在form表单内新增一个隐藏的type="text"的<input>标签。

如下:

<form id="form3" method="post" enctype="multipart/form-data">
   <input type="text" style="display: none;"/>
</form>

 

form表单回车提交问题

最近发现在form里的一个input敲击回车键时会提交form表单。查了资料,发现会出现这个情况的原因是浏览器帮我们做了处理。这里总结几条规则:1. 如果表单里有一个type=”submit”的按钮,回车键生效。2.如果表单里只有一个ty... 查看详情

阻止form元素内的input标签回车提交表单(代码片段)

<form></form>标签内input元素回车会默认提交表单。阻止回车默认提交表单:$(‘form‘).on(‘keydown‘,function(event)if(event.keyCode==13)returnfalse;)  查看详情

form表单(回车)提交问题

我们有时候希望回车键敲在文本框(input element)里来提交表单(form),但有时候又不希望如此。比如搜索行为,希望输入完关键词之后直接按回车键立即提交表单,而有些复杂表单,可能要避免回车键误操作在未完成表单... 查看详情

解决element表单回车提交会刷新页面的bug(代码片段)

问题描述Element表单,提交按钮添加回车按键提交事件.偶尔出现回车提交直接刷新页面的情况.原因分析:Element表单本身存在的一个Bug,原生form表单的默认事件就是回车提交,现在原生form表单不怎么用了.原生form中回车弹起就会... 查看详情

Vue 在按下回车键和使用验证观察器时阻止表单提交

】Vue在按下回车键和使用验证观察器时阻止表单提交【英文标题】:Vuepreventformsubmitwhenpressingenterandusingvalidation-observer【发布时间】:2022-01-1121:50:42【问题描述】:我有以下代码:<validation-observerv-slot="handleSubmit"ref="formValidator"&g... 查看详情

遇到的一个form表单自动提交问题解决办法(代码片段)

Form表单中只有一个input元素时按回车会默认提交表单。有的时候我们希望按回车可以进行列表查询,但是查询后表单被自动提交了,然后刷新了整个页面。这个时候就需要对这个Form表单处理一下以满足在只有一个input元素时也能... 查看详情

javascript控制回车键进行表单(form)提交(转)

...子事件去捕获键盘事件有3个:keydown,keypress,keyup分别是按下,按着没上抬,上抬键盘。$(document).keyup(function(event){if(event.keyCode==13){$("#submit").trigger("click");}});推荐:keyup,防止笔记本键盘不小心触摸到。1、有些文档中有写成这样... 查看详情

from表单回车自动提交

 自动提交的情况1表单只有单个输入框2type=‘submit 这里注意button默认type为submit 解决方法1添加一个隐藏的输入框2form添加属性onsubmit="returnfalse;" <form><inputtype="text"name=""><inputtype="hidden"name=""> 查看详情

按下回车键时禁用表单提交,因为我使用的是 Ajax 功能

】按下回车键时禁用表单提交,因为我使用的是Ajax功能【英文标题】:DisableformsubmissiononpressingenterbecauseiamusingAjaxfunctionality【发布时间】:2011-06-0613:30:00【问题描述】:我正在使用ajax功能。当我使用回车键选择任何建议时,表... 查看详情

阻止form回车自动提交

 问题:当form表单中只有一个input时,在input中按回车键会自动提交.解决方案:  1.form元素上加onsubmit="returnfalse"(推荐)  2.多个input存在时按回车不会自动提交(注意:表单中有提交按钮的话,该方法不行)  3.给input绑定onkeydown事... 查看详情

form表单提交注意事项

...一个form表单中,若只有一个input(不管type是什么),按回车键表单会自动提交,但是当表单中存在多个input时,按回车键不会执行任何操作,这是form表单的一个特性。2、在一个表单中若存在一个input是submit,则按回车表单会提... 查看详情

form表单里如果只存在一个文本框,enter键提交

...为。以下:1)、当form表单里只存在一个input输入框时,回车会提交表单操作。   解决方法可以在form里面再加入一个隐藏的input输入框,或者把input从form里面放出来。2)、当form表单里有一个type=”su 查看详情

html表单 - 按下回车时自动按钮焦点

】html表单-按下回车时自动按钮焦点【英文标题】:htmlform-automaticbuttonfocuswhenpressingenter【发布时间】:2012-04-2209:23:21【问题描述】:我正在构建一个表,我想从中更新数据库的不同字段。输出当前值,然后是提交按钮和用于输入... 查看详情

js采坑记录-form表单中只有一个input时,按回车键后表单自动提交

在一个form表单中,若只有一个input,按回车键表单会自动提交,但是当表单中存在多个input时,按回车键不会执行任何操作,这是form表单的一个特性。 解决方案:1.把表单去掉,使用onclick事件,不用表单提交 2.多一个inpu... 查看详情

使用回车键阻止表单提交

】使用回车键阻止表单提交【英文标题】:Preventformsubmissionwithenterkey【发布时间】:2010-12-0611:47:04【问题描述】:我刚刚编写了这个在表单本身上工作的漂亮小函数...$("#form").keypress(function(e)if(e.which==13)vartagName=e.target.tagName.toLower... 查看详情

表单提交时submit按钮的值没有被提交(代码片段)

...交后获取的数组中有Submit下标的值2.回到FORM表单,直接敲回车提交,这时候发现获取的数组中没有Submit下标。3.在浏览器版本低的情况下,也会出现submit的值没有提交2.解决方法:如果确实需要传递值,请使用hidden域进行值的提... 查看详情

按下表单中的输入时要执行的默认操作(代码片段)

...保存输入的值。当用户在光标位于其中一个输入字段中时按下enter键,表单被提交并且与第一个按钮相关联的操作被执行时,会出现问题。代码如下所示:<h:commandButtonaction="#bean.reset"value="Reset"/><h:commandButtonaction="#bean.save"va... 查看详情

表单只有一项input时按回车键会提交表单

...p; @keyup.enter.native 来处理回车事件。 结果发现按下回车时页面总会被刷新?? 第一反应查询关键字vue、element、el-form…… 结果发现是HTML的已知bug(feature)……https://www.w3.org/MarkUp/html-spec/html-spec... 查看详情