表单按回车自动提交(转)

http://www.cnblogs.com/luoyanli/archive/2012/07/09/2582650.html

1、当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>

如果想添加回车事件可以在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>

我们有时候希望回车键敲在文本框(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添加背景图合适些。

时间: 2024-10-30 12:38:28

表单按回车自动提交(转)的相关文章

form表单取消按钮自动提交

默认写在form表单里的按钮可以自动提交表单,现在要实现的效果是点击button按钮调用js函数,再有ajax提交 <button type="button" class="btn btn-sub" onclick="return formSubmit();">提交</button> function formSubmit() { // 如果是修改渠道号,原来就有渠道参数,需要将原有的渠道参数初始化进去 $("#

bootstrap表单按回车会自动刷新页面的问题

想给form表单增加回车自动提交的功能 $('#password').keydown(function(event){ if (event.keyCode == 13) $('#login').click(); }); 然而,并没有达到预期的效果,而是自动刷新了表单,并将表单参数放在了url后面,如图 发现是是form标签的问题,将其改为div 问题解决,但原因未知

ASP.NET MVC 表单的几种提交方式

下面是总结一下在ASP.NET MVC中表单的几种提交方式. 1.Ajax提交表单 需要引用 <script type="text/javascript" src="/Scripts/jquery-1.7.2.min.js"></script>    <script src="/Scripts/jquery.validate.min.js" type="text/javascript">&l

Yii表单验证中,提交前验证,不通过不提交

$form = $this->beginWidget('CActiveForm',array(         'id' => 'add_host',         'enableAjaxValidation' => false,         'enableClientValidation' => true,         'clientOptions' => array(                 'validateOnSubmit' => true  

jQuery form插件的使用--用 formData 参数校验表单,验证后提交(简单验证).

Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 一.引入依赖js <script src="jquery-1.3.1.js" type="text/javascript"></script> <script src="jquery.form.js" type="text/javascript"&g

一个表单、多个提交按钮、提交到多个不同页面

<html> <head> <title>一个表单.多个提交按钮.提交到多个不同页面</title> </head> <script> function sm1(){ document.form1.action="1.php"; document.getElementByIdx("form1").submit(); } function sm2(){ document.form1.action=

from表单的分向提交

一:需求: 思路:document.form.action,表单分向提交,javascript提交表单同一个表单可以根据用户的选择,提交给不同的后台处理程序.即,表单的分向提交.如,在编写论坛程序时,如果我们希望实现用户在发送贴子的时候,既发送提交功能又有预览功能时,就会遇到上述问题.即,当用户点击提交按钮时,我们希望表单提交给"提交"处理程序:而当用户点击预览按钮时,我们希望表单提交给"预览"处理程序.那么,如何实现上述功能呢?下面代码可以很好的解决这个问题. 二

js实用表单模糊搜索和自动提示插件

fuzzysearch是一款实用的表单模糊搜索和自动提示js插件.该js插件允许你只输入部分字符串,根据这部分字符串自动搜索和匹配,并给出自动替代选项.适用于各种数据的快速检索. 在线演示:http://www.htmleaf.com/Demo/201503081485.html 下载地址:http://www.htmleaf.com/jQuery/Form/201503081484.html

from 表单回车自动提交

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