jQuery:キーの制御
最終更新日時:2017-02-15 00:00:00
jQuery
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 の方を使うのが良さそうです。
※詳細は不明です(/_\*)
参考
ファンクションキーを制御したい場合には以下のコードを使います。
| ファンクションキー | キーコード |
|---|---|
| F1 | 112 |
| F2 | 113 |
| F3 | 114 |
| F4 | 115 |
| F5 | 116 |
| F6 | 117 |
| F7 | 118 |
| F8 | 119 |
| F9 | 120 |
| F10 | 121 |
| F11 | 122 |
| F12 | 123 |