html Javascript 備忘録

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

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

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

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

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

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

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

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

KeyboardEvent - Web API _ MDN

イベントはkeydownと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が非推奨になったのはずいぶんと前なんですね。知らなかった。

-html, Javascript, 備忘録