[JavaScript] キーボードの入力(KeyDown)を受け取る
このページのタグ:[JavaScript]
JavaScriptでキーボードの入力を受け取るコードを紹介します。

概要

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

コード

以下のコードを記述します。

<!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() {
        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プロパティに状態が格納されており、それらの値を判定しています。
メッセージの出力については「[JavaScript] JavaScriptでページ内の特定の位置に文字を出力する (JavaScriptによる指定したIDを持つタグ要素の取得)」の記事を参照してください。

キーコードについて

http://utils.ipentec.com/WebKeyCode/のツールを利用すると、キーに対するキーコードを調べることができます。

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。


キーボードのキーを押すと画面にキーコードが表示されます。


ShiftキーやCtrlキーを同時に押すと、それらの就職キーも検出でき、メッセージが表示されます。



プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)