Javascript / JQuery：如何使用警告框添加不會觸發兩次的按鍵/模糊事件？ 僅限IE

Question

我有一個輸入字段，我想在用戶按下輸入或點擊它時驗證，為此我使用事件keypress和blur 。 如果輸入驗證失敗，則會調用警告框。

我注意到在IE（所有版本）中，如果我輸入無效輸入，由於某種原因，按鍵和模糊事件都被觸發（我懷疑它是警告框，但它不會在FF / Chrome上執行此操作）和它顯示了兩個相同的警報框。 我怎么能這樣才能顯示一個？

編輯：在FF / Chrome中，我現在注意到在我嘗試使用回車驗證后點擊任意位置時會出現第二個警告框。

簡化代碼：

$("#input-field").keypress(function(event) {
    if (event.keycode == 13) {
        event.stopPropagation();
        validate();
        return false;
    }
});

$("#input-field").blur(function() {
    validate();
});

function validate() {
    if ($("#input-field").val() == '') {
        alert("Invalid input");
    }
}

編輯：啊哈。 不是真正的修復，而是我忘記了一個單獨的細節 - 我需要將無效輸入恢復為其先前有效的值，因此當validate函數再次檢查該值時，它不會失敗兩次。

Answer 1

我最后只是檢查IE UserAgent並跳過IE的按鍵事件（將按鍵和模糊綁定到相同的功能，如下所示）。 不幸的是，這不是一個直接或極好的解決方案，但我一直在尋找解決同樣的問題無濟於事。 一些可能有用的小注釋：jQuery規范化哪些，所以你可以放心地使用e.which == 13 with keypress。 我還將這些函數組合成一個綁定，例如

$("#input-field").bind('blur keypress', function(e) {
    if(e.which == 13) {
        // keypress code (e.g. check for IE and return if so)
    }
    validate();
});

我已經嘗試設置全局變量並使用jQuery的data（）來分配任意標志，以指示是否已經為元素觸發（在您的情況下）驗證，但事件同時或至少，如果順序，快速觸發，即使使用將一些標志設置為true的開始行沒有做到這一點。 我已經讀過，放入一個很小的回調延遲可能會有所幫助，但這很麻煩，即使作為一種解決方法，我也不會這樣做，所以我沒有測試過它。 stopPropagation（）和preventDefault（）也沒有幫助。

Answer 2

Firefox沒有正確獲得keypress事件。 這些事件僅在按下產生字符的組合鍵時觸發（這與按任意鍵不同）。

改為使用keydown （因為這可能是IE正確處理的唯一事件 - 因為它應該，因為MS“發明了”它;-)）。

請參閱http://www.quirksmode.org/dom/events/keys.html 。