[JavaScript] キーボードからの入力を取得する

今回はJavaScriptでキーボードの何らかのキーが押されたら、そのキーコードを取得する処理を取り上げます。

解説

キーコードを取得

結論から言うと以下のようにkeypress, keydown, keyupのいずれかのイベント処理で引数として渡されるオブジェクトのe.keyCodeを参照するだけです。

window.addEventListener("keydown", (e)=>{
  const keycd = e.keyCode;
});

ここで注意すべき点としては、例えば「A」キーを押したらAという文字列が入ってくるわけではなく、キー毎に割り当てられた数字が入っている点です。「A」キーなら整数の65ですね。

解説
キーコードチェッカー
- サンプル
- ソースコード
参考ページ

キーコードを文字列で取得

数字でもそれほど困ることは無いのですが、人間に優しい文字列でもう少し分かりやすく取得することもできます。以下のようにe.codeを参照します。

window.addEventListener("keydown", (e)=>{
  const keycd = e.keyCode;
  const code  = e.code;    // ★NEW!
});

主な注意点としては以下になります。

シフトキーを押しながら「1」キーを押すと日本語配列のキーボードであれば「!」が入力されるわけですが、e.codeに入ってくるのはキー毎に割り振られた文字列が常に返されます。あくまでどのボタンが押されたかという情報です。
一覧を見るとわかりますが、「A」キーを押した際はAが渡されるわけではなくKeyAという文字列が返ってきます。
ブラウザ/OSにとって差異があります
IE, Edgeは非対応

同時に押したキーを取得

シフトキーなど何らかのキーと同時に押されているかも簡単に判定できます。これらの値はBooleanで渡されますので、押されていればtrue、離れていればfalseとなります。

window.addEventListener("keydown", (e)=>{
  const keycd = e.keyCode;
  const code  = e.code;

  // ★New!
  const onShift = e.shiftKey;  // シフトキー (Boolean)
  const onCtrl  = e.ctrlKey;   // コントロールキー (Boolean)
  const onAlt   = e.altKey;    // オルトキー (Boolean)
  const onMeta  = e.metaKey;   // メタキー: Windowsキー,⌘キーなど (Boolean)
});

キーコードチェッカー

サンプル

というわけで実際にキーコードが確認できる簡単なサンプルを用意しました。

ソースコード

サンプルコードのソースです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>キーイベント</title>
  <link rel="stylesheet" href="style.css" type="text/css" media="all">
</head>
<body>

<h1>キーコードチェック</h1>
<p><strong style="color:red">このあたりをクリック</strong>したあとに、適当なキーボードのキーを押してください。</p>
<form id="result">
  <input type="text" id="keycd" placeholder="keycode">
  <input type="text" id="code"  placeholder="code">

  <dl>
    <dt>シフトキー</dt>
    <dd><input type="text" id="shiftkey" placeholder="-"></dd>
    <dt>コントロールキー</dt>
    <dd><input type="text" id="ctrlkey" placeholder="-"></dd>
    <dt>オルトキー</dt>
    <dd><input type="text" id="altkey" placeholder="-"></dd>
    <dt>メタキー</dt>
    <dd>
      <input type="text" id="metakey" placeholder="-"> <small>(Windowsキー, ⌘キーなど)</small>
    </dd>
  </dl>
</form>

<h2>履歴</h2>
<ul id="history">
</ul>

<script>
window.onload = ()=>{
  // キーが押されたらここに入れる
  let cur = {
    keycd: "",
    code: "",
    onShift: "-",
    onCtrl: "-",
    onAlt: "-",
    onMeta: "-"
  };

  /*
   * [イベント] キーが押し込まれた瞬間
   */
  window.addEventListener("keydown", (e)=>{
    cur.keycd   = e.keyCode;   // 押されたキー (Integer)
    cur.code    = e.code;      // 押されたキー (String)
    cur.onShift = (e.shiftKey)? "⭕":"-";  // シフトキー (Boolean)
    cur.onCtrl  = (e.ctrlKey)?  "⭕":"-";  // コントロールキー (Boolean)
    cur.onAlt   = (e.altKey)?   "⭕":"-";  // オルトキー (Boolean)
    cur.onMeta  = (e.metaKey)?  "⭕":"-";  // Windowsキー,⌘キーなど (Boolean)

    // フォームに値をセット
    document.querySelector("#keycd").value    = cur.keycd;
    document.querySelector("#code").value     = cur.code;
    document.querySelector("#shiftkey").value = cur.onShift;
    document.querySelector("#ctrlkey").value  = cur.onCtrl;
    document.querySelector("#altkey").value   = cur.onAlt;
    document.querySelector("#metakey").value  = cur.onMeta;
  });

  /*
   * [イベント] キーが戻された瞬間
   */
   window.addEventListener("keyup", (e)=>{
    // 履歴に表示
    const buff = document.querySelector("#history").innerHTML;
    const html = `<li><b>KEY</b>:${cur.keycd},${cur.code} <b>SHIFT</b>:${cur.onShift}, <b>CTRL</b>:${cur.onCtrl}, <b>ALT</b>:${cur.onAlt}, <b>META</b>:${cur.onMeta}</li>${buff}`
    document.querySelector("#history").innerHTML = html;
  });
}
</script>
</body>
</html>