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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="style.css">
	<title>入力したキー情報を画面に表示していく</title>
	<script>
		var keyString = "";
		window.onkeydown = function(e){
			// 入力キー情報を取得
			var key = e.key;
			// 今までの入力キー情報を連結
			keyString += key;
			// 画面に表示
			document.getElementById("out").innerHTML = keyString;
		}
	</script>
</head>
<body>
	<h1>入力したキー情報を画面に表示していく</h1>
	<p id="out"></p>
</body>
</html>

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

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

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

var key = e.key;

として取得できる。

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

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

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