69. 取消form表单提交默认enter事件

最新推荐文章于 2023-09-07 09:57:19 发布
最新推荐文章于 2023-09-07 09:57:19 发布
阅读量1k 收藏
点赞数
分类专栏： 使用技巧 文章标签： javascript css css3 html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ffan1/article/details/107419203
版权

69. 取消form表单提交默认enter事件

备注： 给项目修bug时发现form表单的input提交方法包含一个默认enter提交事件，导致原本作为iframe内部的表单提交发生了我们意料之外的交互，于是需要清除这个默认事件，看了一些资料之后发现也很简单，只需要一个类型为text的input标签即可让默认事件失效，但要谨记，这个input的标签只能有type这个属性，否则无法停止默认事件。

使用空的input事件

<input itype="text" style="display:none" />

代码应用

<form method="post" class="form-horizontal js-ajax-form m-form" enctype="multipart/form-data">
            <fieldset>
                <!-- 部门名称 -->
                <div class="control-group
最低0.47元/天 解锁文章
he_feifan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML页面禁用Enter键自动提交表单
Tony Chen的专栏
09-15 1万+
在HTML页里面由于使用了form，常常需要禁用enter提交表单。因为内容页或者母版页自身有如果有type="submit"的button,当textbox聚焦时，按下enter都会触发表单的默认提交（不论是IE还是firefox），于是需要在onkeydown中监听用户的按键。实际测试，IE8中导致表单提交的不确定因素太多，点击表单的table中的td都会触发表单提交，而firefox则不会；于是在ie和ff中禁用表单提交需要不同的思路。对于IE:只有当事件源是TEXTAREA时才return true
jquery.form.js异步提交表单详解
10-19
主要为大家详细介绍了jquery.form.js异步提交表单的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
16.取消a标签或者from表单默认提交事件
qq_41905827的博客
05-19 784
当a标签只想作为一个按钮来使用时，需要把a标签的默认提交事件取消 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 在某些时候，我们需要使用a标签作为按钮来使用，但是我们有不想让其 href生效， .
vue中在弹框中使用form表单，取消默认的回车提交效果-刷新页面
浩星
09-07 1154
vue项目中使用dialog弹框的时候，如果在弹框上使用form表单，但是我们只是使用他的input框，不需要它默认的提交功能的时候，会出现input聚焦，回车刷新页面，是因为他触发了默认的form提交方法。解决办法，可以js动态禁止回车，也可以去掉默认的提交。
输入框禁止回车事件
ni15534789894的博客
01-26 961
@keydown.native.prevent 输入框禁止回车事件。
取消form表单自动提交
better_super的博客
04-27 3168
1.form表单会自动提交的几种情况 1）表单里有一个type="submit"的按钮，回车键生效 2）表单里只有一个type="text"的input，回车键生效。 解决一键回车表单提交只需在form上加上onsubmit="return false;"就行 该<form>标签里面的<button>的Type属性改为button,那样也可以取消form表单的自动提交 我们在<button>标签中没加上type="button"的话，from会自动将type
Submit-the-form.rar_form 提交_提交表单
09-22
本压缩包“Submit-the-form.rar”包含了一份关于ASP提交表单的源码示例，这对于我们理解如何在ASP环境下处理用户输入数据极其有价值。 首先，我们来看"index.htm"，这是一个HTML文件，通常作为用户交互的前端界面。...
php curl模仿form表单提交图片或文件
01-13
当我们想要提交表单数据时，可以使用`curl_setopt()`函数设置`CURLOPT_POSTFIELDS`选项。对于文件上传，我们需要将文件路径作为值，文件名作为键。例如： ```php $postFields = array( 'file' => '@/path/to/...
form表单中去掉默认的enter键提交并绑定js方法实现代码
10-27
本文将详细介绍如何在`form`表单中取消`Enter`键的默认提交行为，并绑定自定义的JavaScript函数。 首先，要禁用`Enter`键的默认提交，可以在输入框`<input>`上添加`onkeydown`事件监听器。例如： ```html (event....
Form表单按回车自动提交表单的实现方法
11-28
1.form表单中只有一个input标签,按回车键将自动提交表单 当form表单中只有一个<input type=”text” name=’name’ />时按回车键将会自动将表单提交。 <form id='form1' action='a1.jsp' method='post'&gt...
form表单的单输入框回车出现同步提交事件处理
wzp20092009的博客
02-22 2470
form表单中如果只有一个输入框，在输入时按Enter回车键会出发默认事件自动提交表单，该交互是同步发生的，会导致页面刷新。
如何屏蔽按回车提交form表单的动作
zmxj的专栏
09-03 3529
有时候你希望form表单的提交 通过自己的事件提交，而不需要按回车键就自动提交，甚至，有时对你来说按回车键提交了还会产生错误或你不想要的结果，这是该怎么处理呢？可以通过截获键盘事件，判断到是回车的时候返回false.  var   Nav4   =   document.layers;     var   IE4   =   document.all;         function ent
屏蔽input默认的回车事件/取消回车自动提交表单
wilL-my的博客
09-11 3751
方法一： 在 form 标签上添加 'onkeypress' <form onkeypress="return event.keyCode != 13;"> 方法二： JQuery 统一处理 $(document).on("keypress", "form", function(event) { return event.keyCode != 13; }); ...
取消回车表单自动提交
weixin_30663391的博客
04-07 549
做分页查询,页面跳转的问题. 由于要传递的参数不仅仅是需要跳转的页码,还有一些偏移量等数据,所以不能通过回车直接提交, 而是通过一个方法,在该方法中设置相应的数据,再提交表单. 所以需要屏蔽掉表单回车提交的功能. 代码: <script type="text/javascript"> $(function() { 　　 //阻止表单中的输入框回车提交功能 ...
html取消回车刷新提交
weixin_30778805的博客
06-29 158
<form class="weui-search-bar__form" onsubmit="return false;"> <form class="weui-search-bar__form" onsubmit="onkeydown="if(event.keyCode==13)return false;;">如需重写操作，在return false前添加方...
antd输入框禁止回车
马优晨
04-01 3698
问题： 比如这里，我输入一个淘宝账号名：结果按回车，就触发了 冒泡。 处理办法： const preventBubble = function (e) { e.preventDefault(); }; <Item label="淘宝账号名"> {getFieldDecorator('taobaoNick', { rules: [ { required: true, message: '请输入淘宝账号名'
Element-UI中el-form内部在输入框回车导致刷新页面的问题解决。
TangBoBoa的博客
03-31 1135
当el-form表单里面只有一个el-input输入框的时候，在输入框选中时按回车会刷新页面
如何阻止表单的默认提交事件
qq_45272642的博客
11-18 4083
表单一点击提交按钮(submit)必然跳转页面，如果表单的action为空也会跳转到自己的页面，即效果为刷新当前页。 如下，可以看到一点击提交按钮，浏览器的刷新按钮闪了一下： 如果想要阻止表单的默认提交事件，有以下几种方法： 1.将<input>标签内按钮类型从type="submit"修改为type="button" 2.表单内的<button>未指定类型时，默认的类型为submit，可以显式的修改为<button type="button">来阻止表单提交 3
HTML防止input回车提交表单
热门推荐
李刚的学习专栏
03-28 4万+
最近在做一个小需求时，发现了一个问题：当form表单中，存在一个button，在input中按回车会自动触发form提交，很是郁闷，经过查询资料，特总结如下： 自动提交情况说明： 1.默认情况下，单个输入框，无论按钮的type="submit"还是type="button"类型，回车即提交。 2.当type="submit"时，无论有几个type="text"输入框，回车均表示提交。
jquery.form.js 清空表单
最新发布
09-08
jquery.form.js 是一个用于处理表单的插件，其中包含了一些用于清空表单的方法。 要清空表单，可以使用 `resetForm` 方法。该方法可以在提交表单完成后，将表单中的所有字段值重置为初始状态。使用方法如下： ```...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值