1

altKey、 、を使用せずにshiftKey、、をctrlKey含むそれらを検出することは可能ですか?CapsLockTabSpace

4

1 に答える 1

1

JavaScript でどのキーが押されたかを調べる興味深い方法を次に示します。これはとても役に立ちます

  • 押されたキーに基づいてアクションをトリガーします。
  • フォーカスを切り替えるのではなくインデントを作成することで、タブがスポイラーを再生するのを防ぐ
  • Caps Lock がオンになっているかどうかを確認します。特にフォームフィールドに入力するときに、ユーザーに通知できます。
  • ナビゲーションなどに矢印キーを使用します。

JavaScript コードは次のとおりです。

    window.addEventListener("keypress", function(e){
         console.log(e.keyCode);
    });

    window.addEventListener("keydown", function(e){
         if(e.keyCode==9)       
         {   
              console.log("You Pressed Tab");
              e.preventDefault();
         }
    });

    window.addEventListener("keyup", function(e){
        var keyPressed; 
        switch(e.keyCode)
        {
            case 9: return;   // already handled above
            case 18: keyPressed="Alt"; e.preventDefault(); break;
            case 20: keyPressed="Caps Lock"; break;
            case 17: keyPressed="Ctrl"; break;
            case 16: keyPressed="Shift"; break;
            case 37: keyPressed="Left A"; break;
            case 38: keyPressed="Top A"; break;
            case 39: keyPressed="Right A"; break;
            case 40: keyPressed="Bottom A"; break;
            default: keyPressed=e.keyCode;
        }
        console.log("You pressed "+keyPressed);
    });

switch caseコンストラクトがハンドラーにない理由keydownは、個人的には、キーが押されたままのときにハンドラーを複数回実行するのが好きではないためです。もちろん、switchケースに追加のキーを追加することもできます。Tabの下にあることにも注意してkeydownください。これはTab、キーが押されたときにトリガーされるためです。の下に配置されていたkeyup場合、keypressハンドラーはトリガーされず、ウィンドウのフォーカスが変更され、keyupハンドラーが役に立たなくなります。フォーカスの変更をpreventDefault()防ぎます。 コードは一例ですので、必要に応じて変更してください。TabAlt

于 2015-10-22T18:29:13.633 に答える