「' keyCode ' は非推奨です」が出た
以前書いたコードをVS Codeで開くとメソッドやプロパティに取り消し線が引かれていることがあります。
マウスカーソルを合わせるとポップアップ表示で「〜は非推奨です」などと表示されます。
言語の仕様変化に合わせてエディタが警告してくれるのですからなんとも便利な時代です。
最近も長年使っているWebアプリを改造しようとしたら「' keyCode ' は非推奨です」が出てしまいました。
このアプリではキーボードショートカットの実装でkeyCodeプロパティを参照していました。
残念ながらVS Codeは解決策を示してくれなかったのでこの機会にKeyboardEventについて調べてまとめました。
イベントはkeydonwとkeyupの2種類、keypressは廃止
キーボードイベントはkeydown（onkeydown）とkeyup（onkeyup）の2種類。
keypressというのもありましたが廃止（非推奨）とのこと。使ったことないけど。
keyCodeの代わりはkeyかcode
keyCodeの代わりに使うのはkeyかcodeになります。
キーボードイベントのプロパティの取得方法はこんな感じです。
javascript
window.document.onkeydown = function (evt) {
const keyCode = evt.code;
keyCodeの結果は数字で返されましたがkeyやcodeは文字で返されます。こうすると機種やブラウザ依存が少なくなるのかな？
でもMDNには「警告: これはユーザーのキーボード配列を無視しますので、〜」とか書いてあります。まぁ悩んでも仕方ないので、とにかく推奨されてるプロパティを使います。
具体的にどんなデータが返されるかは最後にあるCodePenを使って試せます。
主なKeyboardEventプロパティ
自分が使いそうなプロパティを表にしてみました。
| type | イベントの種類。keyup,keydown |
| shiftKey | シフトキーの状態。true/false |
| ctrlKey | コントロールキーの状態。true/false |
| altKey | option（Alt）キーの状態。true/false |
| metaKey | command(Win)キーの状態。true/false |
| repeat | キーがリピート中かどうか。true/false |
| isComposing | 日本語入力中かどうか。true/false |
| key | 入力された文字を返す。文字は修飾キーの影響を受ける。修飾キーの左右を区別しない |
| code | 押されたキーを返す。文字は修飾キーの影響を受けない。修飾キーの左右を区別する |
keyとcodeの違い
プロパティの中にkeyとcodeがあって、一見すると違いが分かりにくいです。
keyは基本的に入力された文字が渡されます。Shiftキーが押されていれば大文字が返されます。
codeはShiftやOption(Alt)キーが押されていても変わらず同じ値が得られます。
注意したいのはキーボード最上段の数字キーです。Shiftキーを押して"!"が入力される時も、codeは"Digit1"となります。
動作そのものは英字と同じなのですが、Shiftキーの有無によって数字と記号に切り替わるのでちょっと戸惑います。
この辺も表にして整理しました。
| 押したキー | keyの値 | codeの値 |
| d | d | keyD |
| Shift+D | D | keyD |
| 1 | 1 | Digit1 |
| Shift+1 | ! | Digit1 |
| option(Alt) | Alt | AltRight,AltLeft |
| ctrl | Control | ContolRight,ControlLeft |
| command (win?) | Meta | MetaRight,MetaLeft |
ちょっと面白いのは日本語キーボードで"¥"や"ろ"を押した時のcodeです。
¥のcodeは"IntlYen"、"ろ"のcodeは"IntrRo"となります。
KeyboardEventを見るアプリ
プロパティから取得できるcodeとかkeyの値をいちいち調べるのが面倒なので、キーを押したり離したりすると、KeyboardEventの主なプロパティを表示してくれるアプリを作りました。
See the Pen
by Ryoji Kimura (@ryjkmr)
on CodePen.
keyCodeが非推奨になったのはずいぶんと前なんですね。知らなかった。