一个输入按键运行两次JavaScript keypress事件处理程序代码

时间:2015-10-29 18:38:14

标签: javascript

为什么一个人输入keypress两次运行此代码? 我已尝试keypresskeydownevent.preventdefault()无效。

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

        alert("1")


        alert("focado " + focado.id + " fim " + fim + " inicio " + inicio + " fimseg " + fimseg + " anterior " + anterior);
    }
});

只有在给出这3条消息两次之后,才会继续使用剩余的代码(未显示)。

更新

这是完整的程序:

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

        var focado = document.getElementById(document.activeElement.id), fim = focado.id.substring(1),
            inicio = focado.id.substring(0, 1),
            fimseg = fim,
            anterior = inicio + (fim - 1),
            seguinte = focado;


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

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

        alert("focado " + focado.id + " fim " + fim + " inicio " + inicio + " fimseg " + fimseg + " anterior " + anterior + " seguinte " + seguinte);

        if (focado.value.length == 0) {//enter no vazio

           alert("aqui")
            if (fim != 1) {//se não é p1 nem a1
                alert("1")
                if (document.getElementById(anterior).value.length == 0) {//se anterior vazio
                    alert("2")
                    document.getElementById(anterior).focus()
                } else {//se anterior não vazio
                    alert("3")
                    if (seguinte == "a5") {//se é a4
                        alert("4")
                        document.getElementById("btnSubmit").click();
                    } else {//se nºao é a4
                        alert("5")
                        document.getElementById(seguinte).focus()
                    }
                }

            } else {//é p1 ou a1

                document.getElementById(focado.id).focus()  //foca no próprio

            }
        } 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

当它到达

if (focado.value.length == 0) 

它回到第一个变量声明。这是一个问题,因为变量fimsegseguinte以错误的值开始循环。

1 个答案:

答案 0 :(得分:0)

您似乎有语法错误。即使我在您的问题中包含未正确代码包装的});,我仍然会在Firebug控制台中收到此错误:

SyntaxError: missing ;
before statement alert("1") <----

尝试在http://jsfiddle.net/创建样本。然后我们可以为您提供更多帮助。

修改

好的,我看着你的jsfiddle。根据您的评论,我认为主要问题是:

  • 听起来这是某种客户端验证脚本。但是,如果输入有效或无效,您无法准确解释它应该做什么。我会假设你想要一个弹出消息。我认为将“跳转到下一个空盒子”行为与“验证并提交值”行为分开更有意义。所以我在两个独立的处理程序中做到了。
  • 如果您专注于按钮(例如,通过对其进行标记,或按下它但在释放鼠标按钮之前将鼠标移开)然后按Enter,则会出现错误,因为按钮的ID不匹配您为文本框设置的ID的预期模式。所以我更改了按钮,使其与第一个(左上角的文本框)上的Enter按键相同。我调用event.stopPropagation()以防止它冒泡到文档Enter handler。
  • 我更新了Enter处理程序以仅处理文本框,因为如果只关注文档正文或按钮然后按Enter键,则会出现错误。

以下是更新后的工作代码:https://jsfiddle.net/op96m1Ln/2/。我使用parseInt来捕获当前框和一些简单的逻辑,以便按顺序跳转到下一个框。我还使用正则表达式来验证输入。