您的位置:首页 > 设计教程 > 网页设计 > 内页

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

核心提示: 在web开发中,通常有按回车键提交表单的情况,我们一般是写个onkeydown事件,然后在函数中进行相应处理,如果是回车键,则提交,可是,FireFox并不捕获回车事件,所以要解决该兼容性问题,通常需要单独注册个事件

最近遇到IE6/7下敲击回车后表单不提交的问题,网上找到些资料,设计联盟分析如下:
 
 
回车键提交表单:设置 <input /> 标签或者 <button> 标签的属性 type="submit" 即可。
 
回车键不提交表单,用JavaScript来解决,具体代码如下:
 
document.getElementsByTagName('form')[0].onkeydown = function(e){
    var e = e || event;
    var keyNum = e.which || e.keyCode;
    return keyNum==13 ? false : true;
};
 
分析:
 
如果按钮用 <input /> 标签,标签的 type="submit" ,IE6、7、8、Firefox回车时均提交。
 
如果按钮用 <input /> 标签,标签的 type="button" ,
 
1 没有 <input type="text" value="" /> 回车均不提交。
2 有一个 <input type="text" value="" /> , IE6、7下焦点在何处回车均不会提交,IE8、只有焦点在 <input type="text" value="" /> 上时回车才会提交, Firefox均回车会提交。
3有多个 <input type="text" value="" /> ,IE6、7、8、Firefox均不会提交。
 
如果按钮用 <input /> 标签,标签的 type="" ,E6、7、8、Firefox均会默认为 type="text" 。
 
如果按钮用 <button> 标签,标签的 type="submit" ,E6、7、8、Firefox回车时均提交。
 
如果按钮用 <button> 标签,标签的 type="button" ,
 
1 没有 <input type="text" value="" /> 回车均不提交。
2 有一个 <input type="text" value="" /> , IE6、7下焦点在何处回车均不会提交,IE8、只有焦点在<input type="text" value="" />上时回车才会提交, Firefox均回车会提交。
3 有多个 <input type="text" value="" /> ,IE6、7、8、Firefox均不会提交。
 
如果按钮用 <button> ,标签的 type="" ,IE6、7下默认的 type="button" ,IE6、7下焦点在何处回车均不提交,IE8、Firefox默认为 type="submit" ,IE8、Firefox均回车会提交。

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

 

<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并不捕获回车事件,所以要解决该兼容性问题,通常需要单独注册个事件,代码如下:

 

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

 

文章源自 设计联盟 www.DesignLinks.cn 中国最具影响力的创意设计综合网站

编辑:Beach

搜索推荐
设计联盟官方微信
设计联盟官方微信
微信公众号:design_news
扫一扫 订阅最新资讯
回到顶部