キーボードの入力(KeyDown)を受け取る

JavaScriptでキーボードの入力を受け取るコードを紹介します。

概要

JavaScriptでキーボードの入力を受け取る場合は、document.onkeydownイベントにキーが押された際に実行される関数を設定します。

プログラム例

コード

以下のHTMLファイルを作成します。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
      document.onkeydown = keydown;

      function keydown(event) {
        target = document.getElementById("message");
        target.innerHTML = "キーが押されました KeyCode :" + event.keyCode;

        target = document.getElementById("messageShift");
        if (event.shiftKey == true) {
          target.innerHTML = "Shiftキーが押されました";
        }
        else {
          target.innerHTML = "";
        }

        target = document.getElementById("messageCtrl");
        if (event.ctrlKey == true) {
          target.innerHTML = "Ctrlキーが押されました";
        }
        else {
          target.innerHTML = "";
        }

        target = document.getElementById("messageAlt");
        if (event.altKey == true) {
          target.innerHTML = "Altlキーが押されました";
        }
        else {
          target.innerHTML = "";
        }
      }
    </script>
</head>

<body>

  <div>メッセージ</div>
  <div id="message"></div>
  <div id="messageShift"></div>
  <div id="messageCtrl"></div>
  <div id="messageAlt"></div>
</body>
</html>

解説

JavaScript実行時にdocument.onkeydown = keydown を実行し、キーが-押されたらkeydown()関数を実行する動作とします。
keydown()関数では、押されたキーのコードを取得し、画面に表示します。キー入力と同時に押されたShift,Ctrl,Altキーは、イベントのshiftKey, ctrlKey, altKeyプロパティに状態が格納されており、それらの値を判定しています。
メッセージの出力については「ページ内の指定した位置に文字を出力する方法」の記事を参照してください。