Jquery回车键切换焦点方法（兼容各大浏览器）

做项目时，客户要求能够用enter回车直接切换输入(焦点),当最后一个时候，直接提交信息。

第一想法就是，网上去copy一段代码直接用。但了百度、谷歌找了个遍，找到的代码80%以上都是一样的。有的代码太老，都不能用。有的只有部分浏览器能用。折腾了半小时也没个合适的办法。最后一想，干脆自己动手。

一、思路

　　每次点击回车的时候，获取当前的焦点位置，然后设置它的下一个元素获取焦点;

二、代码

<script type="text/javascript">
 $('input:text:first').focus(); 
 document.onkeydown = function enterHandler(event)
 {
     var inputs = $("input");                     //可自行添加其它过滤条件     
     var browser = navigator.appName ;            //浏览器名称
     var userAgent = navigator.userAgent;         //取得浏览器的userAgent字符串 
     
     var Code = '' ;
     if(browser.indexOf('Internet')>-1)            // IE    
        Code = window.event.keyCode ;
     else if(userAgent.indexOf("Firefox")>-1)     // 火狐
        Code =  event.which;
     else                                         // 其它
         Code = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
    
     if (Code == 13)                             //可以自行加其它过滤条件
     {
         for(var i=0;i<inputs.length;i++)
         {
            if(inputs[i].id == document.activeElement.id)
            {    
                i = i== (inputs.length - 1) ? -1 : i ;
                $('#'+ inputs[i+1].id ).focus()
                break;
            }
         }
      }
 }

</script>

其中，因为IE和火狐对键值获取的不同，所以对浏览器做了简单的判断区分。这样就可以在各个浏览器上获取敲击的键值。

最后，获取到当前的值以后，就可以加其它的各种条件了。

附：另一篇参考文档

基于JQUERY的实现回车键ENTER切换焦点

系统默认情况下，使用Tab按键切换页面元素的焦点，有没有想过回车键Enter也可以实现这种功能，并且具有良好的用户体验。

接下来我们使用Jquery实现回车键Enter切换焦点，此代码在常用浏览器IE7, IE8, Firefox 3, Chrome 2 和 Safari 4测试通过。
使用的开发工具是微软VS2010+Jquery框架。
实现步骤如下
1、 首先引用Jquery类库

2、 Javascript代码

<script type="text/javascript"> 
$(function () { 
  $('input:text:first').focus(); 
  var $inp = $('input:text'); 
  $inp.bind('keydown', function (e) { 
    var key = e.which; 
    if (key == 13) { 
      e.preventDefault(); 
      var nxtIdx = $inp.index(this) + 1; 
      $(":input:text:eq(" + nxtIdx + ")").focus(); 
    } 
  }); 
}); 
</script> 

分析：
$('input:text:first').focus(); //页面初始化时，焦点定位第一个文本框内
var $inp = $('input:text'); //取的type=文本框的元素集合
$inp.bind('keydown', function (e) {} //给文本框集合绑定'keydown'事件
var key = e.which; //取的当前按下的键值 比如Enter的键值=13
e.preventDefault(); //可以阻止它的默认行为的发生而发生其他的事情，在这里我们组织PostBack发生，而是切换焦点。另外一个相近的方法是stopPropagation，它起到阻止js事件冒泡的作用。

事件代理用到了两个在JavaSciprt事件中常被忽略的特性：事件冒泡以及目标元素。当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。对任何一个事件来说，其目标元素都是原始元素，在我们的这个例子中也就是按钮。目标元素它在我们的事件对象中以属性的形式出现。使用事件代理的话我们可以把事件处理器添加到一个元素上，等待事件从它的子级元素里冒泡上来，并且可以很方便地判断出这个事件是从哪个元素开始的。
var nxtIdx = $inp.index(this) + 1; //取的元素集合inp中的下一个元素索引
$(":input:text:eq(" + nxtIdx + ")").focus(); //定位焦点到集合的下一个元素

3.、HTML代码

<div> 
<asp:TextBox ID="txt1" runat="server" /><br /> 
<asp:TextBox ID="txt2" runat="server" /><br /> 
<asp:TextBox ID="txt3" runat="server" /><br /> 
<asp:TextBox ID="txt4" runat="server" /><br /> 
</div> 

4、 HTML代码

<div> 
<asp:TextBox ID="tb1" runat="server" class="cls" /><br /> 
<asp:TextBox ID="tb2" runat="server" class="cls" /><br /> 
<asp:TextBox ID="tb3" TextMode="MultiLine" runat="server" class="cls" /><br /> 
<asp:TextBox ID="tb4" runat="server" class="cls" /><br /> 
</div> 

分析：
页面中所以的TextBox 引用Class=”cls”,便于后期的对页面元素的Jquery查询。

5、 Javascript代码

<script type="text/javascript"> 
$(function () { 
  $('input:text:first').focus(); 
  var $inp = $('.cls'); 
  $inp.bind('keydown', function (e) { 
    var key = e.which; 
    if (key == 13) { 
      e.preventDefault(); 
      var nxtIdx = $inp.index(this) + 1; 
      $(".cls:eq(" + nxtIdx + ")").focus(); 
    } 
  }); 
}); 
</script>