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

2019年5月19日

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

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。