KeyboardEvent.keyCode が非推奨になっていたので KeyboardEventを整理してみた

2021年8月15日

「' keyCode ' は非推奨です」が出た

以前書いたコードをVS Codeで開くとメソッドやプロパティに取り消し線が引かれていることがあります。

マウスカーソルを合わせるとポップアップ表示で「〜は非推奨です」などと表示されます。

言語の仕様変化に合わせてエディタが警告してくれるのですからなんとも便利な時代です。

最近も長年使っているWebアプリを改造しようとしたら「' keyCode ' は非推奨です」が出てしまいました。

このアプリではキーボードショートカットの実装でkeyCodeプロパティを参照していました。

残念ながらVS Codeは解決策を示してくれなかったのでこの機会にKeyboardEventについて調べてまとめました。

キーボードイベントはkeydown（onkeydown）とkeyup（onkeyup）の2種類。

keypressというのもありましたが廃止（非推奨）とのこと。使ったことないけど。

keyCodeの代わりに使うのはkeyかcodeになります。

キーボードイベントのプロパティの取得方法はこんな感じです。

 javascript
window.document.onkeydown = function (evt) {
const keyCode = evt.code;

keyCodeの結果は数字で返されましたがkeyやcodeは文字で返されます。こうすると機種やブラウザ依存が少なくなるのかな？

でもMDNには「警告: これはユーザーのキーボード配列を無視しますので、〜」とか書いてあります。まぁ悩んでも仕方ないので、とにかく推奨されてるプロパティを使います。

具体的にどんなデータが返されるかは最後にあるCodePenを使って試せます。

自分が使いそうなプロパティを表にしてみました。

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は基本的に入力された文字が渡されます。Shiftキーが押されていれば大文字が返されます。

codeはShiftやOption(Alt)キーが押されていても変わらず同じ値が得られます。

注意したいのはキーボード最上段の数字キーです。Shiftキーを押して"!"が入力される時も、codeは"Digit1"となります。

動作そのものは英字と同じなのですが、Shiftキーの有無によって数字と記号に切り替わるのでちょっと戸惑います。

この辺も表にして整理しました。

ちょっと面白いのは日本語キーボードで"¥"や"ろ"を押した時のcodeです。

¥のcodeは"IntlYen"、"ろ"のcodeは"IntrRo"となります。

プロパティから取得できるcodeとかkeyの値をいちいち調べるのが面倒なので、キーを押したり離したりすると、KeyboardEventの主なプロパティを表示してくれるアプリを作りました。

See the Pen
by Ryoji Kimura (@ryjkmr)
on CodePen.

keyCodeが非推奨になったのはずいぶんと前なんですね。知らなかった。