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="text"/>按下回车将不会自动提交,但是页面上显示一个不知所云的输入框挺别扭,后从网上搜到两个解决办法:

(1) 添加一个<input type='text' style='display:none'/>不显示输入框,然后回车之后也不会提交:

<form id='form1' action='a1.jsp' method='post'>
<input type='text' name='name' />
<input style='display:none' />
</form>

(2) 添加一个onkeydown事件,然后回车之后也不会显示:

<form id='form1' action='a1.jsp' method='post'>
<input type='text' name='name' onkeydown='if(event.keyCode==13) return false;'/>
</form>

ps: 我对于这个 event.keyCode==13表示没有看懂,只是理解为判断条件,但具体还是不懂.如果阁下明白,还请不吝赐教.

如果想添加回车事件,可以在onkeydown事件中添加判断提交表单:

<form id='form1' action='a1.jsp' method='post'>
<input style='display:none' />
<input type='text' name='name' onkeydown='if(event.keyCode==13){gosubmit();}' />
</form>

2.关于是否需要自动提交

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

要控制这些行为,不需要借助JS,浏览器已经帮我们做了这些处理,这里总结几条规则:

如果表单里有一个type=”submit”的按钮,回车键生效。

如果表单里只有一个type=”text”的input,不管按钮是什么type,回车键生效。

如果按钮不是用input,而是用button,并且没有加type,IE下默认为type=button,FX默认为type=submit。

其他表单元素如textarea、select不影响,radio checkbox不影响触发规则,但本身在FX下会响应回车键,在IE下不响应。

type=”image”的input,效果等同于type=”submit”,不知道为什么会设计这样一种type,不推荐使用,应该用CSS添加背景图合适些。

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

(0)

相关推荐

  • Jquery响应回车键直接提交表单操作代码

    事情是这样的,做了一个登陆页面,把 Form 去了,直接拿 Jquery 的 Ajax 跟服务器交互,但是这样的话 浏览器就不会默认响应 回车键提交数据了.索性让 Jquery 也接管 回车键的响应吧: 复制代码 代码如下: $("#loginbox input[type='submit']").click(function() {     //Ajax 与服务器交互验证 }); $('#loginbox').keydown(function(e){     if(e.keyCode

  • js 回车提交表单两种实现方法

    1.JavaScript 方法: 复制代码 代码如下: [javascript] <script> document.onkeydown=function(event){ e = event ? event :(window.event ? window.event : null); if(e.keyCode==13){ //执行的方法 alert('回车检测到了'); } } </script> <script> document.onkeydown=function

  • 不同浏览器对回车提交表单的处理办法

    条件是: 在IE和Firefox下 1.<form>属性的"action"字段必填: 2.有一个type="submit"的"input". 在Chrome和Safari下 满足第一条即可.(注释1) 所以,如果要控制提交行为的话(比如,提交前检查必填项是否已填),可以在type="submit"的"input"后添加Javascript"onXXX(比如onClick)"事

  • 网页中表单按回车就自动提交的问题的解决方案

    1.当form表单中只有一个<input type="text" name="name" />时按回车键将会自动将表单提交. 复制代码 代码如下: <form id="form1" action="post.php" method="post">       <input type="text" name="name" />   &

  • 没有form表单情况下敲回车键提交表单的js代码

    function enterPress(e) { if (e.keyCode == 13) { login(); } } function login(){ //登录验证等 alert('login'); } Username: Password: [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 如何防止回车(enter)键提交表单

    如何防止回车(enter)键提交表单,其实很简单,就一句话.onkeydown="if(event.keyCode==13)return false;"把这句写在from标签里面就好了. 如果在页面中按Enter键会自动提交的话,可以设置返回值防止自动提交如<input id="q" name="q" type="text" onkeypress="javascript:return gosearch();&q

  • jquery禁止回车触发表单提交

    复制代码 代码如下: <form class="form-inline definewidth m20" action="/" method="get">              <input type="text" name="title" id="title"class="abc" value="">         

  • 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=

  • 如何防止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

  • 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

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

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

  • 微信开发之php表单微信中自动提交两次问题解决办法

    前言: 最近做微信开发,在微信中访问PHP页面,页面中有个表单.测试发现偶尔会出现表单被自动提交两次的情况,导致流程出错. 问题原因 暂时未找到原因,不过怀疑跟微信本身的机制有关. 解决方法 用session,每次提交表单时,计算一个随机数post出去.页面处理表单提交时,先判断是否有这个session,如果不存在就保存,存在就和post过来的随机数比较,如果相等表示重复提交. 代码示例: 表单部分 <div class="odform"> <form action=

  • 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下异步提交表单 异步跨域提交表单

    1.使用post提交方式 2.构造表单的数格式 3.结合form表单的submit调用ajax的回调函数. 使用 jQuery 异步提交表单代码: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>无标题页</title> </head> <script src="js/jquery-1.4.2.js">&l

随机推荐