IE和FireFox按回车自动提交表单问题解决

最新推荐文章于 2023-12-12 16:43:11 发布

寻找Simple

最新推荐文章于 2023-12-12 16:43:11 发布

阅读量521

点赞数

分类专栏： javascript

javascript 专栏收录该内容

10 篇文章

订阅专栏

在web开发中，通常有按回车键提交表单的情况，我们一般是写个onkeydown事件，然后在函数中进行相应处理，如果是回车键，则提交，代码如下：

[xhtml]view plaincopyprint? 
    
 <html>  
     <head>  
          <mce:script type="text/javascript"><!--  
                 var enterSubmit = function(){  
                    if(event.keyCode==13){  
                       alert("开始提交！");  
                    }  
                 }  
            
 // --></mce:script>  
     </head>  
     <body>  
          <form action="http://www.baidu.com">  
            <input type="text" value="按回车提交支持FireFox" onkeydown="enterSubmit()"/>  
            <input type="text" style="display:none" mce_style="display:none"/>  
          </form>  
     </body>  
 </html>  

可是，FireFox并不捕获回车事件，所以要解决该兼容性问题，通常需要单独注册个事件，代码如下：

[xhtml]view plaincopyprint? 
    
 <html>  
     <head>  
     <mce:script type="text/javascript"><!--  
     window.onload = function(){   
           var usernameobj = document.getElementById("usernameobj");    
           function addEvent(el,evtType,fn) {  
           if (el.addEventListener) {  //FF  
              el.addEventListener(evtType,fn, false);  
                return;  
           }else if(el.attachEvent) {  //IE  
                el.attachEvent("on" + evtType,fn, false);  
                return;  
           }  
       }  
       function enterSubmit(evt){  
            if(evt.keyCode==13){  
               alert("开始提交！");  
            }  
         }  
                     
           addEvent(usernameobj,'keydown',function(evt){  
              enterSubmit(evt);  
           });  
                     
      }  
     
 // --></mce:script>  
     </head>  
     <body>  
          <form action="http://www.baidu.com">  
            <input id="usernameobj" type="text" value="按回车提交支持FireFox" />  
            <input type="text" style="display:none" mce_style="display:none"/>  
          </form>  
     </body>  
 </html>  