KeyboardEvent について調べた

キーボードのボタンを押した際と、ボタンを離した際にイベントが発生する（keydown, keyup）。なお、押されたのが普通の文字(ctrl, altとかじゃない奴ら)の場合、keydownに続いてkeypressが発生するので、大抵はこっちの方が便利。

イベントを eとする。e.key で何が押されたかがわかるし、 e.ctrlKey, e.altKey, shiftKey などの bool値を調べれば、その文字と一緒に押されたキーがわかる

以下のコードでそれを確かめれられる:

window.addEventListener('keydown', ev => {
  const ctrl = ev.ctrlKey ? 'Ctrl + ' : '';
  const shift = ev.shiftKey ? 'Shift + ' : '';
  console.log(`${ctrl}${shift}${ev.key} is pressed`);
});

上記の例では、ev.key が直接文字を返すので、shift 判定はあんまり重要でない。a が押された場合は ev.key は 'a' になるし、shift + a が押された場合は、'A'になる。

重要なのは、キーの押しっぱなしで連続してイベントが発生しうることだ。例えば、「Shift + a を押したいな」というときは、まずは Shift を押しっぱなしにして、それから a を押す。このようなシチュエーションでは、keydown イベントが山ほど来る。そのほとんどは Shift の押しっぱなしのせいだ。

それがいやだよ、って場合は keydown ではなく、 keypress を使うべきなのだろうが、それはそれでめんどくさい。例えば、Ctrl + z が押された場合。この場合、keypress における、ev.keyは z ではなく、^Zになってしまう。また、ev.code の値も入っていない。なのでkeypressでハンドルするのはそれはそれでややこしい。

参考: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent