深圳全飞鸿

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 546|回复: 1
打印 上一主题 下一主题

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

[复制链接]

800

主题

1379

帖子

7704

积分

版主

Rank: 7Rank: 7Rank: 7

积分
7704
跳转到指定楼层
楼主
发表于 2023-7-22 21:49:38 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
已验证的:
                //控件联动
                $("#form11").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);
                                alert(idx);
                                if (idx == inputs.length - 1) {
                                        //if (confirm("最后一个输入框已经输入,是否提交?"))
                                                $("#form").submit();  
                                } else {
                                        inputs[idx + 1].focus();  
                                        inputs[idx + 1].select();
                                }
                        }
                });

                $("#form input:text").keypress(function(e) {
                        if (e.which == 13) {
                                var inputs = $("#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").submit();  
                                } else {
                                        inputs[idx + 1].focus(); // 设置焦点
                                        inputs[idx + 1].select(); // 选中文字
                                }
                                return false;// 取消默认的提交行为
                        }
                });

回复

使用道具 举报

800

主题

1379

帖子

7704

积分

版主

Rank: 7Rank: 7Rank: 7

积分
7704
沙发
 楼主| 发表于 2023-7-22 21:50:24 | 只看该作者
未验证:

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);
    }
});
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|nagomes  

GMT+8, 2025-5-4 23:55 , Processed in 0.027225 second(s), 20 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表