JS：入力したキー情報を画面に表示していく

JavaScriptでキーボードのどのキーが現在押されているかをチェックする。

JavaScriptではABCなどのアルファベットキーからタブやエンターキー、コントロールキーなどの機能キーなどの押された状態がチェック出来る

キーを押したとき、どんな情報が取得されるかを見るために入力したキー情報を画面に表示していくJavaScriptプログラムを作った。

実際に取得される値（アルファベットや数字キー以外）はこんな感じ

キーの種類	取得文字列
エスケープ	Escape
全角／半角	Zenkaku
タブ	Tab
シフト	Shift
コントロール	Control
Windowsキー	OS
エンター	Enter
デリート	Delete
挿入	Insert
ファンクション1～12	F1～F12
右矢印	ArrowRight
左矢印	ArrowLeft
上矢印	ArrowUp
下矢印	ArrowDown

ちなみに大文字の「A」などは、シフトキーを押したままaキーを押すときちんと「A」として取得されていた。

プログラム： showKeyType.html

1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8">
5    <link rel="stylesheet" href="style.css">
6    <title>入力したキー情報を画面に表示していく</title>
7    <script>
8        var keyString = "";
9        window.onkeydown = function(e){
10            // 入力キー情報を取得
11            var key = e.key;
12            // 今までの入力キー情報を連結
13            keyString += key;
14            // 画面に表示
15            document.getElementById("out").innerHTML = keyString;
16        }
17    </script>
18</head>
19<body>
20    <h1>入力したキー情報を画面に表示していく</h1>
21    <p id="out"></p>
22</body>
23</html>

解説
キーボードを押した時の判定は、windowのkeydownイベントで取得している。

window.onkeydown = function(e){ /* キーが押された時の処理 */ }

どのキーが押されたかの情報は、このwindowイベント引数のeを使って

var key = e.key;

として取得できる。

例えばキーボードのaが押された場合、変数keyには「a」が入る。
エンターキーを押したときは、文字列として「Enter」が入ってくる。
これを利用すれば、特殊キーが押されたかの判定も可能だ。

例）JavaScriptでコントロールキーが押された時の判定をする

1window.onkeydown = function(e){
2    // 入力キー情報を取得
3    var key = e.key;
4    if(key === "Control") console.log("コントロールキーが押されました");
5}