在处理输入按键事件

时间:2015-10-29 14:29:41

标签: javascript html

我正在尝试根据一些规则将光标跳转到代码栏或手动代码输入到下一个字段(下一个字段不一定是下一个按顺序......)

按Enter键触发功能(代码栏的结尾也给我输入我需要的)。

麻烦的是,当只提交一个输入按键(一个手动或一个带有代码栏)时,该功能就像在执行期间获得第二个一样... 它将重新评估哪个输入处于活动状态。 我甚至插入了一些警告信息,发现它确实运行了两次!

无法弄明白我使用不同的方法从头开始重写代码,但结果是一样的。同样的错误。

我也尝试了e.preventdefault(),但事实并非如此。

以下是代码的两个版本:

$(document).keypress(function (e) {
    if (e.which == 13) {
        var focado = document.getElementById(document.activeElement.id);
        var fim = focado.id.substring(1);
        var inicio = focado.id.substring(0, 1);

        var anterior = inicio + (fim - 1);

        switch (fim) {
            case "1":
                fimseg = "2"
            case "2":
                fimseg = "3"
            case "3":
                fimseg = "4"
            case "4":
                fimseg = "5"
        }
                    var seguinte = inicio + (fimseg);

                    if (seguinte == "p5") {
                          seguinte = "a1";
                    }

        if (focado.value.length == 0) {

            if (fim != 1) {

                document.getElementById(focado.id).focus()
            } else {

                if (anterior.value.length == 0) {

                    document.getElementById(anterior).focus()
                } else {

                    if (seguinte == "a5") {

                        document.getElementById("btnSubmit").click();
                    } else {

                        document.getElementById(seguinte).focus()
                    }
                }
            }
        } else {

            if (focado.value.length < 7 || (isNaN(focado.value))) {

                document.getElementById(focado.id).innerHtml = "";
                if (anterior.value.length == 0) {

                    document.getElementById(anterior).focus()
                } else {

                    document.getElementById(focado).focus()
                }
            } else {

                if (fim != 1) { //não é p1 nem a1


                    if (anterior.value.length == 0) {

                        document.getElementById(anterior).focus()
                    } else {

                        if (seguinte == "a5") {

                            document.getElementById("btnSubmit").click();
                        } else {

                            document.getElementById(seguinte).focus()
                        }
                    }
                } else {


                    document.getElementById(seguinte).focus()
                }
            }
        }
    } //não é enter
}); //fim função

和另一个具有相同错误的版本

$(document).keypress(function (e) {
if (e.which == 13) {

    var focado  = document.getElementById(document.activeElement.id);

    if (focado.value.length >= 7) {

        switch (focado.id) {

            case "p4":

                document.getElementById("a1").focus();
                break;

            case "p3":
                document.getElementById("p4").focus();
                break;

            case "p2":
                document.getElementById("p3").focus();
                break;

            case "p1":

                document.getElementById("p2").focus();

        }

    } else {//menos de 7 algarismos

        var fim = focado.id.substring(1);
        var inicio = focado.id.substring(0, 1);
        var anterior = inicio + (fim - 1);

        if (fim != 1) {//não é p1 nem a1

            if (focado.value.length == 0) {//em branco




                if (document.getElementById(anterior).value.length == 0) {//se anterior em branco

                    document.getElementById(anterior).focus();//então foca no anterior - devia haver um get focus sempre que fosse num vazio ia para o anterior
                } else {//anterior com dados
                    if (document.getElementById(anterior).value.length >= 7) {

                        switch (inicio) {
                            case "p"://se anterior com dados é p1
                                document.getElementById("a1").focus();

                                break;

                            case "a"://se anterior com dados é a1
                                document.getElementById("btnSubmit").click();
                                break;
                        }//final switch

                    } else {//se anterior tem menos de 7 algarismos
                        document.getElementById(anterior).value = "";
                        document.getElementById(anterior).focus();

                    }



                }



            }//final se focado em branco

        }//final não é p1 nem a1

    }//final menos de 7 algarismos

}//não é enter

});

可能使用不同的键码或不同的事件处理程序进行输入? 感谢

更新: 输入框是:“p1”,“p2”,“p3”,“p4”,“a1”,“a2”,“a3”,“a4”,还有一个“btnSubmit”按钮

2 个答案:

答案 0 :(得分:0)

您可能会发现使用keyDown会更好。它的设计只能开一次。 keyPressed可能会重复。

https://stackoverflow.com/a/15310690/962289

此外,不确定您的问题,但如果您在两个不同的地方$(document).keypress,它应该同时运行它们。你确定他们不会互相干扰吗?

答案 1 :(得分:0)

我的代码上有一些错误。

这种方式有效:

$(document).keypress(function (e) {
    if (e.which == 13) {
        var focado = document.getElementById(document.activeElement.id);
        var fim = focado.id.substring(1);
        var inicio = focado.id.substring(0, 1);
        var fimseg = fim;
        var anterior = inicio + (fim - 1);

        switch (fim) {
            case "1":
                fimseg = "2"
                break;
            case "2":
                fimseg = "3"
                break;
            case "3":
                fimseg = "4"
                break;
            case "4":
                fimseg = "5"
                break;
        }
        var seguinte = inicio + (fimseg);

        if (seguinte == "p5") {
            seguinte = "a1";
        }

        if (focado.value.length == 0) {

            if (fim != 1) {

                document.getElementById(focado.id).focus()
            } else {

                if (document.getElementById(anterior).value.length == 0) {

                    document.getElementById(anterior).focus()
                } else {

                    if (seguinte == "a5") {

                        document.getElementById("btnSubmit").click();
                    } else {

                        document.getElementById(seguinte).focus()
                    }
                }
            }
        } else {
                            if (focado.value.length < 7 || (isNaN(focado.value))) {

                document.getElementById(focado.id).innerHtml = "";
                if (anterior.value.length == 0) {

                    document.getElementById(anterior).focus()
                } else {

                    document.getElementById(focado.id).focus()
                }
            } else {

                if (fim != 1) { //não é p1 nem a1


                    if (document.getElementById(anterior).value.length ==0) {

                        document.getElementById(anterior).focus()
                    } else {

                        if (seguinte == "a5") {

                            document.getElementById("btnSubmit").click();
                        } else {

                            document.getElementById(seguinte).focus()

                        }
                    }
                } else {

                    document.getElementById(seguinte).focus()

                }
            }
        }
    } //não é enter
}); //fim função