我们在做系统前端的时候，往往会用到form标签，采用jquery插件做表单验证。我们信誓旦旦的一位把一切都做好的时候，并且检查一遍又一遍的时候，意向不到的事情发生了，也许是出于一种意外，而这种意外我们从来没有想到，我们不小心碰下了enter键，然后我们发现该走的js它没有走，跳到下一个页面，或者就直接404了。想都不用想，绝对是enter键直接把表单提交了.表单在什么情况下会enter提交呢？我们如果不想表单通过enter键提交我们应该怎么做呢？

出现自动提交的情况，有两种可能：

1.是编写了javascript代码，当用户点按Enter键时，通过js事件侦听机制触发表单的提交。

2.是利用了浏览器的默认行为（至少发现ie是这样的）。浏览器在解析网页的时候，有许多默认的行为，例如如果一个页面上有表单和一个提交按钮，那么打开页面时，焦点会自动落在这个提交按钮上面。同样如果一个表单中只有一个单行文本输入域（text），那么在这个输入域中按Enter键时，浏览器会自动提交该表单。

对于第一种情况的话我们很好理解，我们可以通过下面的方法实现：

  1.  
    <pre class="html" name="code"> $(document).keyup(function(event){
  2.  
    if(event.keyCode ==13){
  3.  
    $("#submit").trigger("click");
  4.  
    }
  5.  
    });


但是对于第二种浏览器的默认行为，可能知道这一点的人就比较少了，有可能是浏览器在表单提交上的默认行为。


    


 这种情况一般都在什么时候发生呢，以ie为例，讲讲它在什么情况下会发生这样的现象


   


  1.  
    

    

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    

    2. 

  2.  
    

    

    <html>
    

    3. 

  3.  
    

    

    <head>
    

    4. 

  4.  
    

    

    <meta http-equiv="Content-Type" content="text/html; charset=GBK">
    

    5. 

  5.  
    

    

    <title>submit例子 - aspxhome.com</title>
    

    6. 

  6.  
    

    

    </head>
    

    7. 

  7.  
    

    

    <body>
    

    8. 

  8.  
    

    

    <h1>本demo演示在文本框中按enter键是否触发提交表单</h1>
    

    9. 

  9.  
    

    

    <h2>默认情况下，一个文本框的时候，提交，不管按钮type是submit还是button</h2>
    

    10. 

  10.  
    

    

    <form action="http://www.csdn.net">
    

    11. 

  11.  
    

    

    <input type="text">
    

    12. 

  12.  
    

    

    <input type="button" value="提交">
    

    13. 

  13.  
    

    

    </form>
    

    14. 

  14.  
    

    

    <h2>一个文本框的时候怎么才能做到不提交，方法是加一个隐藏掉的文本框</h2>
    

    15. 

  15.  
    

    

    <form action="http://www.csdn.net">
    

    16. 

  16.  
    

    

    <input type="text">
    

    17. 

  17.  
    

    

    <input type="text" style="display:none">
    

    18. 

  18.  
    

    

    <input type="button" value="提交">
    

    19. 

  19.  
    

    

    </form>
    

    20. 

  20.  
    

    

    <h2>只要有type为submit的按钮存在，一个文本框还是多个文本框都提交</h2>
    

    21. 

  21.  
    

    

    <form action="http://www.csdn.net">
    

    22. 

  22.  
    

    

    <input type="text">
    

    23. 

  23.  
    

    

    <input type="submit" value="提交">
    

    24. 

  24.  
    

    

    </form>
    

    25. 

  25.  
    

    

    <h2>只要有type为submit的按钮存在，一个文本框还是多个文本框都提交</h2>
    

    26. 

  26.  
    

    

    <form action="http://www.csdn.net">
    

    27. 

  27.  
    

    

    <input type="text">
    

    28. 

  28.  
    

    

    <input type="text">
    

    29. 

  29.  
    

    

    <input type="submit" value="提交">
    

    30. 

  30.  
    

    

    </form>
    

    31. 

  31.  
    

    

    <h2>多个文本框的时候，不提交，用type为button的按钮就行啦</h2>
    

    32. 

  32.  
    

    

    <form action="http://www.csdn.net">
    

    33. 

  33.  
    

    

    <input type="text">
    

    34. 

  34.  
    

    

    <input type="text">
    

    35. 

  35.  
    

    

    <input type="button" value="提交">
    

    36. 

  36.  
    

    

    </form>
    

    37. 

  37.  
    

    

    <h2>用button元素时，FX和IE下有不同的表现</h2>
    

    38. 

  38.  
    

    

    <form action="http://www.csdn.net">
    

    39. 

  39.  
    

    

    <input type="text">
    

    40. 

  40.  
    

    

    <input type="text">
    

    41. 

  41.  
    

    

    <button>提交</button>
    

    42. 

  42.  
    

    

    </form>
    

    43. 

  43.  
    

    

    <h2>radio和checkbox在FX下也会触发提交表单，在IE下不会</h2>
    

    44. 

  44.  
    

    

    <form action="http://www.csdn.net">
    

    45. 

  45.  
    

    

    <input type="text">
    

    46. 

  46.  
    

    

    <input type="radio" name="a">
    

    47. 

  47.  
    

    

    <input type="checkbox" name="b">
    

    48. 

  48.  
    

    

    <input type="checkbox" name="c">
    

    49. 

  49.  
    

    

    <input type="button" value="提交">
    

    50. 

  50.  
    

    

    </form>
    

    51. 

  51.  
    

    

    <h2>type为image的按钮，等同于type为submit的效果</h2>
    

    52. 

  52.  
    

    

    <form action="http://www.csdn.net">
    

    53. 

  53.  
    

    

    <input type="text">
    

    54. 

  54.  
    

    

    <input type="text">
    

    55. 

  55.  
    

    

    <input type="image" src="/images/logo.gif">
    

    56. 

  56.  
    

    

    </form>
    

    57. 

  57.  
    

    

    </body>
    

    58. 

  58.  
    

    

    </html>
    








我们知道了Enter键提交的原理之后我们很明显就有了相对应的解决方法







通常我们用的方法有两种:


1.我们在form标签中来禁止enter键提交


<form name="form" action="" method="post" onkeydown="if(event.keyCode==13)return false;" onSubmit="return checkSubmit();"> 


2.我们可以在form中增加一个隐藏的输入框


<span class="tag"><</span><span class="tag-name">input</span><span> </span><span class="attribute">type</span><span>=</span><span class="attribute-value">"text"</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"notautosubmit"</span><span>  </span><span class="attribute">style</span><span>=</span><span class="attribute-value">"display:none"</span><span class="tag">/></span>


<span class="tag">其次我们可以在type = "test" 中增加onkeypress="javascript:return gosearch();"方法</span>


  1.  
    

    

    <span class="tag"></span>function gosearch() { 
    

    2. 

  2.  
    

    

    if(window.event.keyCode == 13) {
    

    3. 

  3.  
    

    

    search();
    

    4. 

  4.  
    

    

    return false;
    

    5. 

  5.  
    

    

    }
    

    6. 

  6.  
    

    

    }
    



希望对你们有帮助，顺便说一下，这个编辑器太恶心了，每次都得害我丢失内容，乱加东西，并且一点也不好用。








 
												


											
谈谈Enter回车键提交表单那些事 回车搜索 enter搜索的更多相关文章
	

    
								
  1. js防止回车(enter)键提交表单及javascript中event.keycode
		
      如何防止回车(enter)键提交表单,其实很简单,就一句话.onkeydown="if(event.keyCode==13)return false;"把这句写在from标签里 ...
    
		
    2. 
						
  2. 输入框状态禁止enter键提交表单
		
    1:页面中如果存在input输入框和submit提交按钮时,默认按enter键会提交表单,如果我现在在做查询操作,一不小心按了enter键就会有提交表单的操作,这样显然是不合理的,所以我们要禁止按en ...
    
		
    3. 
						
  3. 简单Demo的用户登录JSP界面IE、Firefox（chrome） Enter 键提交表单
		
    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
    
		
    4. 
						
  4. [JS] 页面回车键提交表单-常用于登录页面
		
    //判断是否按下了回车键 var EnterSubmit = function(evt){ evt= window.event || evt; if (evt.keyCode == 13){ //若按 ...
    
		
    5. 
						
  5. javascript   按ctrl和enter键提交表单
		
    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...
    
		
    6. 
						
  6. Enter键提交表单
		
    input type="submit"在360浏览器上不能提交   用了这个 <input type="button" class="btn b ...
    
		
    7. 
						
  7. jQuery回车键提交表单
		
    $(document).keyup(function(event) {     if(event.keyCode==13)     {         $('btnSubmit').trigger(& ...
    
		
    8. 
						
  8. js按Enter键提交表单
		
    function exprint(e){ /* var keycode = event.keyCode; if (keycode == "13"){ fm.UserCode.foc ...
    
		
    9. 
						
  9. javascript —— 禁止通过 Enter 键提交表单
		
    $('btn').on('keydown', function () { return false; })
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Nginx 日志分析命令
			
    查看日志存放目录 # find / -name access.log /var/log/nginx/access.log cd /var/log/nginx IP相关统计 统计IP访问量(独立ip访问 ...
    
			
    2. 
						
  2. Xamarin iOS教程之进度条和滚动视图
			
    Xamarin iOS教程之进度条和滚动视图 Xamarin iOS 进度条 进度条可以看到每一项任务现在的状态.例如在下载的应用程序中有进度条,用户可以很方便的看到当前程序下载了多少,还剩下多少.Q ...
    
			
    3. 
						
  3. [ 转载 ] Java中成员变量 和局部变量
			
    java语言支持的变量类型 类变量:独立于方法之外的变量,用 static 修饰. 局部变量:类的方法中的变量. 实例变量(全局变量):独立于方法之外的变量,不过没有 static 修饰. publi ...
    
			
    4. 
						
  4. BZOJ.2938.[POI2000]病毒(AC自动机)
			
    题目链接 \(Description\) 给n个模式串,问是否存在长度无限的主串,使得任何一个模式串都没有在主串中出现. \(Solution\) 先建AC自动机. 假设我们有了一个无限长的安全代码, ...
    
			
    5. 
						
  5. hdu 5195 线段树
			
    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABIgAAABeCAIAAADHZri1AAATWklEQVR4nO3dvU4jTRaA4b2nvgNzBw
    
			
    6. 
						
  6. CentOS 安装 Python3
			
    CentOS 7 默认安装 python 2.7.5 如图: 开始安装Python 3.6.3 1.下载Python3.6.3包:  拉到最下面,找到对应的包.复制下载链接地址: wget https ...
    
			
    7. 
						
  7. sqlserver2014内存数据库特性介绍
			
    sql server 2014提供了众多激动人心的新功能,但其中我想最让人期待的特性之一就要算内存数据库了,下面就简单介绍一下sql server 2014的内存数据库的一些特性   相信大家对内存数 ...
    
			
    8. 
						
  8. Git 修复 bug 切换分支时，如何保存修改过的代码（即如何保存现场）？
			
    工作除了开发最新的版本之外还要对原来的版本做例行的维护,修修补补.于是有了在两个分支之间游走切换的问题,最新改版的代码在分支 new 上,旧版本的代码在分支 old 上,我在 new 上开发了一半,忽 ...
    
			
    9. 
						
  9. 使用SIGALRM信号为阻塞操作设置超时
			
    我们经常会遇到为阻塞操作设置超时的问题,比如说阻塞套接字read读取设置10秒超时,其中一个办法就是调用alarm函数,它在指定超时时期产生SIGALRM信号,使得阻塞操作中断. 但其弊端在于: 1. ...
    
			
    10. 
						
  10. 交叉编译Python-2.7.13到ARM（aarch64）平台
			
    方法跟交叉编译Python-2.7.13到ARM(aarch32)平台基本一样, 不同的地方只是把工具链换成编译aarch64的工具链,这里可以参考用qemu搭建aarch64学习环境. 创建目录:  ...
    
			
    11.