谈谈Enter回车键提交表单那些事



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

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

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

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

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

   
   $(document).keyup(function(event){
     if(event.keyCode ==13){
       $("#submit").trigger("click");
     }
   });
 
  
 
  
 
  
但是对于第二种浏览器的默认行为，可能知道这一点的人就比较少了，有可能是浏览器在表单提交上的默认行为。
 
  
    
 
  
 这种情况一般都在什么时候发生呢，以ie为例，讲讲它在什么情况下会发生这样的现象
 
  
   
 
  



	
	


	
本demo演示在文本框中按enter键是否触发提交表单
	
默认情况下，一个文本框的时候，提交，不管按钮type是submit还是button
	

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

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

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

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

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

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

		
		
		
		
		
	
	
type为image的按钮，等同于type为submit的效果
	

		
		
		
	


 
  

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

 
  
通常我们用的方法有两种:
 
  
1.我们在form标签中来禁止enter键提交
 
  
 
 
  
2.我们可以在form中增加一个隐藏的输入框
 
  
<input type="text" name="notautosubmit"  style="display:none"/>
 
  
其次我们可以在type = "test" 中增加οnkeypress="javascript:return gosearch();"方法
 
  
function gosearch() { 
  if(window.event.keyCode == 13) { 
    search(); 
    return false; 
  } 
} 
 
  
希望对你们有帮助，顺便说一下，这个编辑器太恶心了，每次都得害我丢失内容，乱加东西，并且一点也不好用。