input输入框点击回车切换到下一个输入框功能

直接上代码：

HTML：

<form class="layui-form" action="../in" id="form" method="post" name='Form'>   
    <div class="layui-form-item">
        <label class="layui-form-label">货架条形码:</label>
        <div class="layui-input-inline">
            <input type="text" name="d1" required lay-verify="required" autocomplete="off" class="layui-input"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">商品条形码:</label>
        <div class="layui-input-inline">
            <input type="text" name="d2" required lay-verify="required" autocomplete="off" class="layui-input"/>
        </div>
    </div>
</form>

JavaScript：

方法一：回车触发后input框来回切换

function focusNextInput(thisInput) {
    var inputs = document.getElementsByTagName("input");
    for(var i = 0;i<inputs.length;i++){
        // 如果是最后一个，则焦点回到第一个 
        if(i==(inputs.length-1)){
            inputs[0].focus(); 
            break;
        }else if(thisInput == inputs[i]){
            inputs[i+1].focus(); 
            break; //不加最后一行eles就直接回到第一个输入框
        }else { //最后的eles是添加的表单提交方法(如果想实现登陆，可以写入登陆方法)
            document.getElementById("form").submit(); //直接form提交
        }
    }
}

//回车触发函数
$("input").keydown(function(event){
    if (event.keyCode == 13) {
        focusNextInput(this);
    }
});

方法二：一样的方式两种方法写的：

EL-1：
//响应回车键按下的处理
$("#form").on("keydown","input",function(){
    var e = event || window.event || arguments.callee.caller.arguments[0];
//判断是否按键为回车键
    if(e && e.keyCode==13) {
        var inputs = $("#form input");
        var idx = inputs.index(this);     // 获取当前焦点输入框所处的位置
        if (idx == inputs.length - 1) {       // 判断是否是最后一个输入框
            if (confirm("最后一个输入框已经输入,是否提交?"))
                $("#form").submit(); // 提交表单
        } else {
            inputs[idx + 1].focus(); // 设置焦点
            inputs[idx + 1].select(); // 选中文字
        }
    }
});

*************************************************************************************************************
EL-2：
$("form[name='Form'] input:text").keypress(function(e) {
    if (e.which == 13) {// 判断所按是否回车键
        var inputs = $("form[name='Form']").find(":text"); // 获取表单中的所有输入框
        var idx = inputs.index(this); // 获取当前焦点输入框所处的位置
        if (idx == inputs.length - 1) {// 判断是否是最后一个输入框
            if($('input[name="d1"]').val()==''||$('input[name="d2"]').val()==''){
                layer.msg('条码不能为空');
                return false;
            }
                $("form[name='Form']").submit(); // 提交表单
        } else {
            inputs[idx + 1].focus(); // 设置焦点
            inputs[idx + 1].select(); // 选中文字
        }
        return false;// 取消默认的提交行为
    }
});

---

上面的方法属于点击回车手动切换到下一个输入框，下面的方法是适用于输入框输入的值时固定位数时来进行自动切换的方法：

//当上一个输入框到固定值时  直接切换到下一个输入框（这里自定义的是三位）
var Form=document.getElementById('form');
var input=Form.getElementsByTagName('input');
var iNow=0;
type  = !-[1,] ? 'onpropertychange' : 'oninput', limit  = 3; //满足自动切换焦点的字符数
for(var i=0;i<input.length-1;i++){
    input[i].index=i;
    input[i][type]=function () {
        iNow=this.index;
        var that=this;
        setTimeout(function () {
            that.value.length>limit-1&&input[iNow+1].focus();
        },0)
    }
}

//然后在最后一个框的时候添加回车触发提交表单事件：
$("input").keydown(function(event){
    if (event.keyCode == 13) {
  	    document.getElementById("form").submit();
    }
});

目前只尝试过这种方式，要是有更简洁的方法欢迎留言贴码~