簡體   English   中英

一次輸入 keypress 運行 JavaScript keypress 事件處理程序代碼兩次

[英]one enter keypress runs JavaScript keypress event handler code twice

為什么一次輸入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以錯誤的值開始該循環。

您似乎有語法錯誤。 即使我包含了}); 在您的問題中沒有正確包裝代碼,我仍然在我的 Firebug 控制台中收到此錯誤:

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

嘗試在http://jsfiddle.net/創建一個示例。 那么我們可以為您提供更多幫助。

編輯:

好的,我看了你的 jsfiddle。 根據您的評論,我認為主要問題是:

  • 這聽起來像是某種客戶端驗證腳本。 但是,如果輸入有效或無效,您並沒有准確解釋它應該做什么。 我將假設您希望以任何一種方式彈出消息。 我認為將“跳轉到下一個空框”行為與“驗證並提交值”行為分開更有意義。 所以我在兩個單獨的處理程序中做到了這一點。
  • 如果您將注意力集中在按鈕上(例如,通過使用 Tab 鍵,或按下它但在釋放鼠標按鈕之前將鼠標移開)然后按 Enter,您將收到錯誤消息,因為按鈕的 ID 與預期的模式不匹配您為文本框設置的 ID。 因此,我將按鈕更改為與第一個(左上角文本框)上的 Enter 按鍵相同。並且我調用了event.stopPropagation()以防止它冒泡到文檔 Enter 處理程序。
  • 我將 Enter 處理程序更新為僅適用於文本框,因為如果您只關注文檔正文或按鈕,然后按 Enter,則會出現錯誤。

這是更新后的工作代碼: https : //jsfiddle.net/op96m1Ln/2/ 我使用 parseInt 來捕獲當前框和一些簡單的邏輯來按順序跳轉到下一個框。 我還使用正則表達式來驗證輸入。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM