keydown / keyup イベント

WebアプリケーションのUIを作る際にキーボードショートカットを設定しておく事がありますが、 そこで必要になるのが keypress / keydown / keyup イベントです。 読んで字のごとく、キーボードのキーを押下した時や離した時に発火するイベントです。

イベントを受け取る

document かテキストインプット/テキストエリア、 あるいは contenteditable で編集可能にされた要素でイベントを受け取ります。

document.addEventListener("keydown", function(e){
    e.keyCode; // 押下されたキーのキーコード
    e.shiftKey; // Shiftキーが押されていれば true
    e.ctrlKey; // Ctrlキーが押されていれば true
    e.altKey; // Altキーが押されていれば true
    e.metaKey; // Commandキー（Mac）が押されていれば true
}, false);

上のコードのように、引数の Event オブジェクトにどのキーが押されたのか判別するためのプロパティが色々ぶら下がっています。 例えば “j” と入力したとき、または “Shift + j” と入力した時に何か処理を行いたい場合は次のように判別する事ができます。

document.addEventListener("keydown", function(e){
    if(e.keyCode === 74){
        // "j" と入力した時の処理
    } else if(e.shiftKey && e.keyCode === 74){
        // "Shift + j" と入力した時の処理
    }
}, false);

keyCode は自分で試しにキーを叩いて調べても良いですし、 MDN で一覧表になっているのでそれを調べても良いです。 一番楽なのは “shift+j” のような文字列からキーイベントを設定してくれるライブラリを利用する事です。

Mac と Windows の 「コントロールキー」

Mac/Windows共に触った事のある方ならご存知の通り、 Macにおける control キーは Windows の Ctrl キーとは役割が異なります。 Macの場合は command キーが Windows の Ctrl キーにあたるのですが、 Event オブジェクトの ctrlKey は共に control/ctrl キーを指してしまいます。

その為、例えば Windows で “Ctrl + k” に処理を割り当てて Mac では “command + k” に割り当てたい場合には、e.metaKey と e.ctrlKey 両方を確認しなければいけません。

var ctrl = e.metaKey || e.ctrlKey;
if(ctrl && e.keyCode === 75){ ... }

上の例では、Mac環境では “command + k” と “control + k” 両方に反応するようになります。 「command だけ割り当てて control は反応してほしくない！」というワガママは取り敢えずここでは考えない事にします。

この他にも環境による差異は結構ある様です。

ライブラリに任せる

一々キーコードを確認して分岐するのは面倒なので、ライブラリに任せてみましょう。 環境による差異も物によっては吸収してくれるので助かります。 キーイベントのハンドリングは頻出な処理だと思うのですが、すぐに見つかる物は意外と数が少なかったです。

Keymaster.js

ショートカットキーを設定する key() メソッドを実装するライブラリです。 依存ライブラリはありません。 第一引数に設定したいキーの組み合わせ、第二引数にコールバックを渡して設定します。 キーの組み合わせはカンマ区切りで複数指定できます。

key("ctrl+k, command+k", function(e, o){
    // Ctrl+k, command+k 押下時の処理
});

「そんなだれでもつかいそうな名前をグローバルに？」という方の為に noConflict メソッドがあるので 衝突を避けたい場合はこれを使いましょう。

var keymaster = key.noConflict();
keymaster("ctrl+k", function(){ ... });

jQuery.gpKey

@ginpei_jp 氏によるショートカットキーライブラリです。 jQuery に依存します。

特徴は、特殊な文字を使用してキーを指定する点がひとつ。 もうひとつは、jQuery のセレクタに渡した要素で発火したようにエミュレートしてくれる点です。

$(".foo").gpKey("down", {
    "^k": function(){
        // Ctrl+k 押下時の処理
    }
});

上の例では、 “.foo” 要素がクリックされてアクティブになった状態になると “ctrl+k” のショートカットが機能するようになります。

気をつけておきたい事

キーボードショートカットはWebアプリケーションだけの為の物ではなく、 ブラウザが使用している物も多く存在します。

ブラウザが提供しているキーを JavaScript で上書きしてしまうと、 ユーザーが普段使っているかもしれないショートカットを使えなくしてしまい、 使い易くする為のショートカットが逆にユーザビリティを損ねてしまう事になります。

各ブラウザに実装されているショートカットキーを把握して、被らないように注意が必要ですね。

参考資料

• KeyboardEvent – DOM | MDN
• madrobby/keymaster
• ginpei/jQuery.gpKey