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

逃离我推掉我的手 2022-02-01 23:34 898阅读 0赞

直接上代码：

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框来回切换

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

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();
        }
    });

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