如何防止INPUT按回车自动提交表单FORM

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获得焦点都不会提交。

<!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">
<input type="text">
</form>
</body>
</html>

或

<!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">
<!-- 这里是通过样式隐藏，不等于<input type="hidden"> ,使用type="hidden"同样会提交 -->
<input type="text" style="display: none;">
</form>
</body>
</html>

单个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" onkeydown="if(event.keyCode==13)return false;">
</form>
</body>
</html>

所以，为了防止INPUT按回车form自动提交，可以以下两种方法：

增加一个隐藏的input。

为input增加一个按键事件来阻止form提交。

以上所述是小编给大家介绍的防止INPUT按回车自动提交表单FORM的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • jQuery解决input超多的表单提交

    jQuery解决input超多的表单提交

    近段时间接到一个比较奇葩的需求,对方要求在企业站中加入一个类似word的表单,并供用户在线填写与提交. 仔细看了一下,该表单的字段高达一百多个,这个量级是相当可怕的.如果每个input手动去填写id和name的话,该是一个多么可怕的体力活啊. 反复思考了一下,为避免苦逼的去逐个填写input的id与name,决定用JS配合PHP的方式来解决这个表单一连串的提交工作. 表单组成部分 表单首先按照客户的要求,将需要填写的表格与选项按照word文档的原型进行布局,使其符合用户体验,如下图: (上图只是

  • input、button的不同type值在ajax提交表单时导致的陷阱

    今天在做利用connection 作表单提交过程中发现,标签"input"跟"botton"中的type属性设置原来也是一门学问. 在开发过程中,为了使html代码更加整洁,我首先利用YAHOO.util.Event.addListener(obj, "click", callback)类加载"click"事件来提交表单,YAHOO.util.Connect.asyncRequest('POST')方式来上传表单数据,如果表单

  • 如何防止INPUT按回车自动提交表单FORM

    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=&qu

  • Form表单按回车自动提交表单的实现方法

    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=

  • JSP中的FORM表单中只有一个input文本时，按回车键将会自动提交表单

    一个列表界面只有一个输入框查询条件,当首次进入在输入框中输入汉字后,按回车键发现输入框中汉字变成乱码!本以为一个很简单不过的问题,结果却花了好久才找到原因(据说是浏览器问题),按回车后执行了两次查询. 1.未修改前代码: <form id="ff" name="ff" method="post"> <input type="text" id="userName" name="us

  • HTML页面禁用Enter键自动提交表单的方法

    在HTML页里面由于使用了form,常常需要禁用enter提交表单.因为内容页或者母版页自身有如果有type="submit"的button,当textbox聚焦时,按下enter都会触发表单的默认提交(不论是IE还是firefox),于是需要在onkeydown中监听用户的按键.实际测试,IE8中导致表单提交的不确定因素太多,点击表单的table中的td都会触发表单提交,而firefox则不会:于是在ie和ff中禁用表单提交需要不同的思路. 对于IE: 只有当事件源是TEXTAREA

  • Java传入用户名和密码并自动提交表单实现登录到其他系统的实例代码

    不用单点登录,模拟远程项目的登录页面表单,在访问这个页面的时候自动提交表单到此项目的登录action,就可以实现登录到其他系统. ssh框架项目 1.以下是本地系统的action代码: import java.io.IOException; import java.util.List; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.i

  • php自动提交表单的方法(基于fsockopen与curl)

    本文实例讲述了php基于fsockopen与curl实现自动提交表单的方法.分享给大家供大家参考,具体如下: fsockopen和curl都可以做php自动提交表单 1. fsockopen方法: php代码: <?php /*----------------------------------------------------------- *功能:使用PHP socke 向指定页面提交数据 *作者:果冻 说明:post($url, $data) * * $url = 'http://www

  • Jquery基于Ajax方法自定义无刷新提交表单Form实例

    本文实例讲述了Jquery基于Ajax方法自定义无刷新提交表单Form的方法.分享给大家供大家参考.具体实现方法如下: Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等. 如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移到ajax中呢. 以前的处理方法: 如Form代码如下: 复制代码 代码如下: <form id="Form1" action="action.aspx" method="pos

  • jsp中如何实现按下回车键自动提交表单

    为了省事很多时候希望可以按回车键来提交表单,要控制这些行为,可以借助JS来达到要求. 代码如下: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="../../common/include_tag.jsp"%> <%@ include fi

  • jQuery实现ctrl+enter（回车）提交表单

    以jQuery插件开发的方法开发.具体代码如下: jQuery.fn.extend({ /** * ctrl+enter提交表单 * @param {Function} fn 操作后执行的函数 * @param {Object} thisObj 指针作用域 */ ctrlSubmit:function(fn,thisObj){ var obj = thisObj || this; var stat = false; return this.each(function(){ $(this).key

  • Jquery提交表单 Form.js官方插件介绍

    先说说常用的Form插件,支持Ajax,支持Ajax文件上传,功能强大,基本满足日常应用. 1.最新JQuery框架软件包下载 jquery.js压缩包 jquery.js非压缩包 2.Form插件下载 form.js 3.Form插件的简单入门 第一步:先增加一个表单 代码: 复制代码 代码如下: <form id="myForm" action="comment.php" method="post"> Name: <inpu

随机推荐