15

矢印キーでナビゲートできるメニューを設定しようとしています。私はFirefoxでこの作業フィンを持っています。

IE8で動作させようとして、少し苦労した後、IE8が矢印のキープレスを登録しないことが原因であることがわかりました。テストする：

$(document).keypress(function (eh){ 
    alert(eh.keyCode);
};

Firefox では、矢印キーのいずれかを押すと、37、38、39、または 40 のアラートがトリガーされます。

IE8では、何もありません。標準の QWERTY キーボードのその他のキーは登録されますが、矢印キーは登録されません。

これは私の Javascript の問題ですか? ブラウザの設定？Windows の設定ですか？

4

4 に答える 4

38

jQuerykeypressドキュメント(紹介テキストの最後の段落) から:

keydownandkeyupはどのキーが押されたかを示すコードを提供し、 whilekeypressはどの文字が入力されたかを示します。たとえば、小文字の "a" は と で 65 と報告されますが、 では 97 と報告されkeydownます。大文字の「A」は、すべてのイベントで 97 として報告されます。この違いにより、矢印キーなどの特殊なキーストロークをキャッチする場合は、orを選択することをお勧めします。keyupkeypress.keydown().keyup()

矢印キーについても文字通り言及しています ;) したがって、keydownまたはkeyupイベントのいずれかにフックする必要があります。これが のSSCCEです。コピーして貼り付けて実行するkeydownだけです。いいえ、ブラウザ互換性チェックを で行う必要はありません。eventこれは、IE6 から Firefox までのすべてのブラウザで機能します。

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2217553</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script>
            $(document).keydown(function(event) {
                switch (event.keyCode) {
                    case 37: alert('left'); break;
                    case 38: alert('up'); break;
                    case 39: alert('right'); break;
                    case 40: alert('down'); break;
                }
            });
        </script>
    </head>
    <body>
       <p>Press one of the arrow keys.</p> 
    </body>
</html>
于 2010-02-08T00:04:52.583 に答える
7

これを試して：

$(document).keydown(function (e) {
    if(!e) {
        e = window.event;
    }
    switch(e.keyCode) {
    case 37:
        goLeft();
        break;
    case 39:
        goRight();
        break;
    }
});
于 2010-02-07T17:39:02.257 に答える
2

「キーダウン」イベントを使用する

于 2010-02-07T17:34:35.503 に答える
1

いくつかのキーに対してイベントをバブリングさせたくない場合があるため、次のようなものを使用します。適切と思われるコード/キーをカスタマイズします。

/* handle special key press */
function checkCptKey(e)
{
    var shouldBubble = true;
    switch (e.keyCode)
    {
        // user pressed the Tab                                                                                                                                        
        case 9:
            {
                $(".someSelect").toggleClass("classSelectVisible");
                shouldBubble = false;
                break;
            };
            // user pressed the Enter    
        case 13:
            {
                $(".someSelect").toggleClass("classSelectVisible");
                break;
            };
            // user pressed the ESC
        case 27:
            {
                $(".someSelect").toggleClass("classSelectVisible");
                break;
            };
    };
    /* this propogates the jQuery event if true */
    return shouldBubble;
};

/* user pressed special keys while in Selector */
$(".mySelect").keydown(function(e)
{
    return checkCptKey(e);
});
于 2010-02-07T23:50:19.873 に答える