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

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("コントロールキーが押されました");
}
スポンサーリンク
スポンサーリンク
スポンサーリンク

シェアする

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

フォローする

スポンサーリンク
スポンサーリンク