回车键完成全页面光标跳转，快捷输入

一.思路

筛选所有input[type='text']输入框，去掉readyonly属性的隐藏input，去掉日期输入框等无需或不能输入的input，剩下的就是可编辑输入inputs，对inputs进行遍历，添加回车‘keydown’或‘keyup’事件，让光标进行跳转。

页面除了input，还有select下拉框，同样的道理，筛选所有select进行遍历，以便判断光标的跳转。

二.jquery代码

1.获取各种input框

var inputtexts=$('input[type="text"]');//全部input输入框
var inputarr=$('input[type="text"][readonly]');//readyonly输入框
var dateinputs=$('.main_in_input_text_date');//日期框
var othertexts=$('.main_in_input_text_underline');//class=main_in_input_text_underline的输入框
var selects=$('select');//select下拉框

2.从inputtexts去掉无关的input

inputarr.each(
    function (k,v) {
        inputtexts.splice($.inArray(v,inputtexts),1);//去掉readynly输入框
    }
);

dateinputs.each(
    function (k,v) {
        inputtexts.splice($.inArray(v,inputtexts),1);//去掉日期输入框
    }
);

othertexts.each(
    function (k,v) {
        inputtexts.splice($.inArray(v,inputtexts),1);//去掉不需要的input，剩下可输入框
    }
);

3.如果页面还有动态添加的input，该怎么办呢？

因为是页面加载完成后添加的标签和元素，所以需要通过‘on（）’方法来绑定委托事件（’on‘可以绑定一件或多见现在或未来的事件，而后添加的元素就是未来事件；’委托‘是指未来元素用’on‘绑定页面加载就存在的元素，委托这些元素完成事件）

比如说，页面有一个输入列表，一行内容输入不完，需要多行（默认是一行），每次点击’新增‘就增加一行，这些新增的行是在页面加载后添加的，称之为未来元素。为了实现所有可输入框光标的跳转，这些未来元素也在光标跳转的考虑之中。假如新增的input的class=’.addclass'，则添加回车事件

$('body').on('keydown','.addclass',function () {//委托’body‘
    $.each($('.addclass'),//遍历
        function (k,v) {
            $(this).keydown(function (e) {//alert(k)
                if (e.keyCode == 13) {//回车事件
                    if(k+1==$('.addclass').length){//光标跳转到原有的某个input
                        inputtexts[31].focus();
                        return;
                    }
                    $('.addclass')[k+1].focus();//光标跳到下一个class=addclass的input
                }
            });
        }
    );
});

4.还有一个问题，页面中一般还有select下拉框挡在inputs之中，光标也需要跳转它们，遍历它们

$.each(selects,
    function (k,v) {
        $(this).keydown(function (e) {//alert(k)
            if (e.keyCode == 13) {//回车事件
                var sendway_type=$('#sendway_type').val();//判断运输方式跳到不同的起始输入框
               switch(k){
                   case 0:  if(sendway_type==0){
                       inputtexts[3].focus();//陆运
                   }else{
                       inputtexts[0].focus();//空运
                   };
                   break;
                   case 5:
                       inputtexts[40].focus();break;

               }
            }
        });
    }
);

5.未来元素和select都考虑了，剩下的就是遍历之前筛选的input，遍历添加回车事件

$.each(inputtexts,
    function (k,v) {
        $(this).keyup(function (e) {//alert(k)

            if(e.keyCode==13){//回车事件
                if(k==40){//最后一个显示的输入框回车后光标跳回起始框
                    var sendway_type=$('#sendway_type').val();//判断运输方式跳到不同的起始输入框
                    if(sendway_type==0){
                        inputtexts[3].focus();//陆运
                    }else{
                        inputtexts[0].focus();//空运
                    }
                }else{
                    var index=k+1;
                    if(k==5){//回车请求ajax
                        var MnemonicCode=$(this).val();
                        var url="./?m=ajax&a=getCompanyByMnemonicCode";
                        $.getJSON(url,{MnemonicCode:MnemonicCode},function (data) {
                            if(data.state==1){
                                //alert('ok')
                                $('#passenger_warehouse').val(data.WareHouse);
                                $('#id_card').val(data.IDCard);
                                $('#send_contact').val(data.LinkMan);
                                $('#send_phone').val(data.Phone);
                                $('#start_city').val(data.City);
                                $('#send_address').val(data.Address);
                                $('#sender').val(data.Company);
                            }else{
                                //alert(data.msg+'，状态码：'+data.state)
                            }
                        });
                        inputtexts[index].focus();
                    }else if(k==6){
                        index=k+8;
                        inputtexts[index].focus();
                    }else if(k==14){
                        var receMnemonicCode=$(this).val();
                        var MnemonicCode=$('#MnemonicCode').val();
                        if(MnemonicCode==receMnemonicCode){//收发货不能同人
                            $(this).focus();
                            return;
                        }
                        var url="./?m=ajax&a=getCompanyByMnemonicCode";
                        $.getJSON(url,{MnemonicCode:receMnemonicCode},function (data) {
                            if(data.state==1){
                                //alert('ok')
                                $('#AgentName').val(data.WareHouse);
                                $('#get_contact').val(data.LinkMan);
                                $('#get_phone').val(data.Phone);
                                $('#disc_city').val(data.City);
                                $('#get_address').val(data.Address);
                                $('#geter').val(data.Company);
                            }else{
                                //alert(data.msg+'，状态码：'+data.state)
                            }
                        });
                        index=k+6;
                        inputtexts[index].focus();//跳到下一输入框
                    }else if(k==29){
                        if($('.addclass').length>0){
                            $('.addclass')[0].focus();
                            return;
                        }

                        index=k+2;
                        inputtexts[index].focus();//跳到下一输入框
                    }else if(k==34){
                        index=39;
                        inputtexts[index].focus();
                    }else if(k==39){
                        selects[5].focus();
                    }
                    else{

            //默认跳到下一输入框，其他if都是判断光标想要跳转的输入框

inputtexts[index]. focus() ;

} } } }) ; }) ;

6.之前的表格新增一行如果也想通过快捷键实现，比如说小键盘的’+‘配合‘alt’，如果新增的<tr class='main_in_re_conten'>,则

$('table').on('keydown','.main_in_tr_content',function (e) {//增加货物列表
    if(e.keyCode==229 || e.keyCode==107){//中文输入229，英文107,小键盘‘+’
        if(e.altKey){
            $('#main_in_tr_add').click();
        }

    }

})

7.以上代码有点混乱，但更重要的是分享一种思路，希望你有所收获。

‘