みさご解体新書

キーボード

キーボードイベント

イベント名 発生する条件
keydown 要素上でキーが押された
keyup 要素上でキーが離された 
document.addEventListener("keydown", (event: KeyboardEvent) => {
  // 画面で任意のキーが押されたときに呼ばれる
});

キーボードイベントを受け取りたい要素に addEventListener で、イベント名とコールバックで呼ばれる関数を登録する。

<div tabindex="0"></div>

div のようなフォーカスが当たらない要素に対してキーイベントを設定する場合は tabindex の値を指定しておく。

on ～

document.onkeydown = () => {
  // 画面のどこかで任意のキーが押されたときに呼ばれる
};

const container = document.getElementById("container");
container.onkeyup = () => {
  // idがcontainerの要素上で任意のキーされたときに呼ばれる
};

要素には onkeydown や onkeyup のような、 on{イベント名} というイベントハンドラがあり、これを利用すると addEventListener を使わず簡潔に記述することができる。

ただしイベントハンドラに指定できる関数は一つだけになる。

<body onkeydown="console.log('test');"></body>

<div onkeydown="console.log('test');" tabindex="0"></div>

on ～系のイベントハンドラは要素の属性でもあるので、HTML から直接記述することができる。

どのキーが押されたか

document.onkeydown = (event: KeyboardEvent) => {
  console.log(event.key, event.code);
};

a KeyA
b KeyB
c KeyC
A KeyA
B KeyB
C KeyC

code は物理的なキー、つまり実際に存在するキーボードで押されたキーそのものに付けられている識別子を返す。例えば A キーなら KeyA 、4 キーなら Digit4 を返す。

key はキーボードのキーに対応している文字を返す。このプロパティは大文字/小文字を区別して返す。

関連記事