jQuery:キーの制御

最終更新日時:2017-02-15 00:00:00
jQuery

jQuery には、keyup/keydown という各要素にキー操作のイベントを処理させるメソッドが用意されています。

例えば、カーソルキーを制御しようとした場合には以下のようにします。
switch で切り分けているコードはキーコードとなります。

 $('html').keyup(function(e) {
                switch (e.which){
                case 37:
                    /* ←の処理 */
                    break;
                case 38:
                    /* ↑の処理 */
                    break;
                case 39:
                    /* →の処理 */
                    break;
                case 40:
                    /* ↓の処理 */
                    break;
                }
 });


ちなみに、上記の処理が終わった後にブラウザ側で通常のキーに対応した処理が行われます。
カーソルキーであれば、例えばページ等のスクロールですね。
たいていの場合、JS でキーイベントを処理した場合にはブラウザには処理させたくないかと思いますが、その場合には、event.preventDefault(); を実行するとイベントがキャンセル出来ます。

which と keyCode


Event オブジェクトには which と keyCode というプロパティがあります。
双方とも、キー操作を行った時のキーコードが取得できるのですが、keyCode の方は Firefox では動作しないようです。
which の方は IE の昔のバージョンでは動作しなかったようなのですが、最近の IE のバージョンであれば正しく動作するようなので、which の方を使うのが良さそうです。
※詳細は不明です(/_\*)

参考


ファンクションキーを制御したい場合には以下のコードを使います。

ファンクションキーキーコード
F1112
F2113
F3114
F4115
F5116
F6117
F7118
F8119
F9120
F10121
F11122
F12123


お問い合わせは 掲示板 にて。