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

  • このエントリーをはてなブックマークに追加
  • LINEで送る

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

解説

キーコードを取得

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

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

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

- Sponsored Link -

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

数字でもそれほど困ることは無いのですが、人間に優しい文字列でもう少し分かりやすく取得することもできます。以下のように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>

参考ページ

- Sponsored Link -

ご質問やリクエストなどお気軽に。メールアドレスの入力は任意です。書き込みが反映されるまで時間がかかります。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください