[Javascript] キーボードイベントを調査

キーボードイベントって、どういう時に使うのでしょう？ 通常のホームページを制作する際に、keyイベントはあまり使わないし、システムを開発していても、ほとんど利用しません。 たま〜に、特定のキーを押したかどうか判定する時に利用するぐらいで、利用イメージがわかない人も多いかもしれません。 僕の経験から、一番使った開発は、EFO(EntryFormOptimization)ツールを構築した時に、キーのタイプングをシステムで判定して、バリデーションチェックを行ったり、日本語変換検知を行ったりする為に使った事がありました。 あと、一番使われているのは、WEBブラウザゲームでの利用でしょう。 キー操作やスペースバー判定、その他のキーボード操作で、画面のキャラクターを動かすには、keyイベントを使って行なわなければいけません。 ただ、スマホ対応となると、またややこしくなるので、今回はPCキーボードのイベント操作を基本として考えます。

よく使うkeyCode一覧

開発する時に、event.keyCodeで値を都度確認してもいいのですが、よく使うものをまとめておいたので、ご利用くださいませ。

key	keyCode	key	code
←(left)	37	ArrowLeft	ArrowLeft
↑(up)	38	ArrowUp	ArrowUp
→(right)	39	ArrowRight	ArrowRight
↓(down)	40	ArrowDown	ArrowDown
space	31	(※半角スペース)	Space
enter	13	Enter	Enter
shift	16	Shift	ShiftLeft , ShiftRight

keyCode,key,codeと参照する値がいくつかありますが、shiftを見ると、left-shiftとright-shiftが判別されているのが、codeの値のみなので、厳密な判定が必要な場合などは、こうした値を参照しなければいけませんね。 他のキーコードを知りたい方は、「参考サイト」のkeyCode一覧のページを見てください。 僕の環境であるMacのGoogleChromeでファンクションキーの判定を行おうとすると、keyCodeが反応せずに取得できなかったので、機種依存なども考慮する必要がありそうですね。

複数キーを押した時の対応

Shift-keyを押しながら何かのキーを合わせ技で判定したい場合は以下のようなプロパティが取得できます。 document.onkeydown = function(e){ if(e. shiftKey === true){ console.log("shift + " + e.code); } else{ console.log(e.code); } }; 他のキー組み合わせで使えるのは以下の通りです。

キー	プロパティ	値
shiftキー	event.shiftKey	trye / false
Controlキー	event.ctrlKey	trye / false
Optionキー(mac) , Altキー(win)	event.altKey	trye / false

trueの場合は、同時に押しているという判定になります。

押しっぱなし判定

キーボードを押しっぱなしにすると、文字がダ〜〜〜〜〜〜....っと、記入されますが、チョンと一回押しただけなのか、押しっぱなしなのかを判定することもできます。 ゲームの時に使う場合は、キャラの移動の場合は、カーソルキーを押しっぱなしにしたり、ボタン連打を判定したりするので、そのような場合の対応ですね。

最初にキーが押された場合

event.repeat === false

押しっぱなし状態の時のイベント発生

event.repeat === true 上記の値を判別して、リピート状態かどうかを判定してプログラミングを組むことができます。

参考サイト

keyCode一覧 https://web-designer.cman.jp/javascript_ref/keyboard/keycode/ https://javascript.programmer-reference.com/js-list-keycode/ https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode keyイベント出力ツール https://keycode.info/ keyイベント関連記事 http://javascript.g.hatena.ne.jp/edvakf/20091114/1258241612 リファレンス https://developer.mozilla.org/ja/docs/Web/API/KeyboardEvent