キーボードで操作をさせる - アナログCPU：5108843109

キーボードで特別に操作をさせたい（もしくはさせたくない）場合があります。
単純にショートカットキーを作りたいとか、
方向キーでモーダルやページ自体を切り替えるとか、
F5キーを押させたくないとか…。

そういう場合は押されたキーを判別する仕組みを置いてやればOK。

$(window).on("keyup", function(e){
    // 例えば、
    // e.key で押されたキー名が、
    // e.keyCode でキーに割り振られたコードが取得できる
});

keyupは名前の通り、キーを押したあとに上がった時の判定になります。
キーを押した時点で反応するkeydownというのもあり、そちらを使うこともできますが、
keydownの場合は押しっぱなしにすると反応し続けます。
さらにkeypressというのもあるようですが、ブラウザによって挙動が異なるという場合があるそうなので
長押しを利用したいという場合以外はkeyupの方が無難ではないかと思います。

このページで何かキーを押すと、↓のエリアに表示されるようになっています。
（反応しない場合はページ内の適当なところをクリックしてフォーカスを合わせてください）
さらに、keyup時にはeを、keydown時には文字列をconsoleに出力するようにしています。

key:

code :

おまけ1：特定の要素に対してのみ有効にする

この書き方の場合、$(window)なのでページ全体が対象になりますが、
もちろん、特定のオブジェクトに対してのみ有効にさせることもできます。

実装サンプルはこちら。
テキストエリアにフォーカスを合わせてから何かキーを押すとalertが出ます。

上記サンプルのコードはこちら。単純にwindow指定から要素指定に変えているだけですね。

<textarea id="textarea"></textarea>
<script>
$("#textarea").on("keyup", function(e){
    alert("テキストエリアでキー(" + e.key + ")が押されました！！！！");
});
</script>

とはいえフォーカスが当たるかどうかが問題になってしまうのか、
入力フォーム系でしか使えなさそうですね。
div等の場合、tabindex属性を付ければ動きました。ブラウザによって若干挙動が違う可能性もありますが…

おまけ2：本来のキーの挙動をさせない

例えばスペースキーや方向キーを押してもスクロールしないようにしたい、などの場合ですね。
これは処理部分でpreventDefaultしてやればOK。

$(window).on("keyup", function(e){
    e.preventDefault();
    // その他の処理
});

おまけ3：iframeの中でも外でも使いたい

（誰得なんだ…でもちょっと苦戦したので残しておく）

＜HTML＞

<iframe id="iframe" src=" ... "></iframe>

＜JS＞

$(window).on("keyup", function(e){
    // 処理
});
$("#iframe").on("load", function(){
    $(this).contents().find("body").on("keyup", function(e) {
        // 処理
    });
});

考え方としては、iframeの中身のbodyタグ内に対してkeyupを有効にする、という感じですね。

おまけ4：Ctrl・Shift・Altとの合わせ技

例えば「Ctrlを押しながら○○を押すと…」というショートカットキーなどの用途に。
それぞれ「ctrlKey」「shiftKey」「altKey」で、押されているか否か（true/false）が取得できます。
（別途サンプルは置きませんが、このページのconsoleでkeyup時のイベントが出るようになっていますのでそちらで確認してください）

$(window).on("keyup", function(e){
    // 例えば「Shift＋s」を押した場合は「false true false s」とコンソールに表示
    console.log(e.ctrlKey, e.shiftKey, e.altKey, e.key);
});