jQuery实现回车绑定Tab事件

　　有时候我们希望回车事件绑定的是键盘的Tab事件。我的第一思路就是切换事件的keyCode，比如键盘事件按下的keyCode如果是13，我们将keyCode改为9。但是在实际编程中却未能实现此效果。于是只能自己通过手写JS脚本来调用input元素的focus()事件。

 

1.原来的一个普通的表单

        <form id="tttttttttttt" action="xxxx.html">
            <input type="hidden" name="" id="" value="" />
            <br />
            <input type="text" name="" id="" value="" />
            <br />
            <input type="text" name="" id="" value="" />
            <br />
            <input type="text" name="" id="" value="" />
            <br />
            <input type="button" id="button" value="第一个按钮" />
            <input type="submit" name="" id="" value="提交按钮" />
            <button>按鈕</button>
        </form>

 

 

 

我们发现当我们按下回车的时候会提交表单，触发表单的submit()事件。原因是有一个按钮的类型是submit。所以点击回车的时候触发了回车事件。

于是将上面的submit按钮改为button，在其click事件中提交表单。

        <form id="tttttttttttt" action="xxxx.html">
            <input type="hidden" name="" id="" value="" />
            <br />
            <input type="text" name="" id="" value="" />
            <br />
            <input type="text" name="" id="" value="" />
            <br />
            <input type="text" name="" id="" value="" />
            <br />
            <input type="button" id="button" value="第一个按钮" />
            <input type="button" name="" id="" value="提交按钮" onclick="$('#tttttttttttt').submit();" />
            <button>按鈕</button>
        </form>

 

 

我们发现当我们按下回车的时候会提交表单，触发表单的submit()事件。原因是有一个button，button默认的类型也是submit，所以也会触发表单提交。

将button的类型改为button。

        <form id="tttttttttttt" action="xxxx.html">
            <input type="hidden" name="" id="" value="" />
            <br />
            <input type="text" name="" id="" value="" />
            <br />
            <input type="text" name="" id="" value="" />
            <br />
            <input type="text" name="" id="" value="" />
            <br />
            <input type="button" id="button" value="第一个按钮" />
            <input type="button" name="" id="" value="提交按钮" onclick="$('#tttttttttttt').submit();" />
            <button type="button">按鈕</button>
        </form>

 

　　

　　这次再按下回车终于不是表单提交了。

 

2.jQuery 设置回车切换input的focus

　　前提是表单中没有submit类型的按钮。针对下面的表单元素进行切换:

        <form id="tttttttttttt" action="xxxx.html">
            <input type="hidden" name="" id="" value="" />
            <br />
            <input type="text" name="" id="" value="" />
            <br />
            <input type="text" name="" id="" value="" />
            <br />
            <input type="text" name="" id="" value="" />
            <br />
            <input type="button" id="button" value="第一个按钮" />
            <input type="button" name="" id="" value="提交按钮" onclick="$('#tttttttttttt').submit();" />
            <button type="button">按鈕</button>
        </form>

 

 

脚本如下: 

　　思路:键盘中判断是否按下的是回车键，如果是回车键，获取表单下的所有的需要切换的input元素，然后与当前元素进行对比，如果相等，就将数组中的下一个元素聚焦(当然如果是最后一个元素的话将第一个元素聚焦)

    $(function(){
        $("input").keydown(function(){
            if(13 == event.keyCode){
                var form = $("#tttttttttttt");
                var inputEles = form.find("input:visible");
                console.log("inputEles -> "+inputEles.length);  //5
                for(var i=0;i<inputEles.length;i++){
                    if($(inputEles[i]).is($(this))){//判断两个jQuery对象是否相等用is
                        if(i == inputEles.length-1){
                            $(inputEles[0]).focus();
                        }else{
                            $(inputEles[i+1]).focus();
                        }
                    }    
                }
            }

        });
    })

 

 

总结:

　　jQuery判断两个元素是否相等用  ele1.is(ele2)

　　button的默认类型是submit(会触发表单的提交)