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

Question

Why does one enter keypress run through this code twice? I've tried keypress , keydown and also event.preventdefault() to no avail.

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

Only after giving these 3 messages twice would it continue to the remaining code (not shown).

UPDATE:

This is the full program:

$(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

When it gets to

if (focado.value.length == 0) 

it goes back to the first variable declaration. This is a problem because that way the variables fimseg and seguinte begin that cycle with the wrong values.

Answer 1

You seem to have a syntax error. Even when I include the }); that was not properly code-wrapped in your question, I still get this error in my Firebug console:

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

Try creating a sample at http://jsfiddle.net/ . Then we can help you more.

EDIT:

OK, I looked at your jsfiddle. Based on your comment, I think the main problems are:

• It sounds like this is meant to be some sort of client-side validation script. But you don't explain exactly what it is supposed to do if the input is valid, or invalid. I'm going to assume that you want a popup message either way. I think it makes more sense to separate the "jump to the next empty box" behavior from the "validate and submit the values" behavior. So I did that in two separate handlers.
• If you focus on the button (eg by tabbing to it, or pressing it down but moving the mouse away before releasing the mouse button) and then press Enter, you will get an error because the ID of the button does not match the expected pattern of the ID's you've set for the text boxes. So I changed the button to act the same as an Enter keypress on the first (top-left text box.) And I called event.stopPropagation() to prevent it from bubbling up to the document Enter handler.
• I updated the Enter handler to only work on the textboxes, because you would get an error if you focus on just the document body or the button and then press Enter.

Here is the updated, working code: https://jsfiddle.net/op96m1Ln/2/ . I use parseInt to capture the current box and some simple logic to jump to the next box in order. I also use regular expressions to validate the input.