JavaScript プログラミング講座

 

キーボードが押されたか調べる

 


■キーボードが押されたか調べる


キーボードが押されたか調べるには、onkeydown イベントを使用します。
 
登録したコールバック関数の引数から、KeyboardEvent オブジェクトが得られます。
 
キーを押しっぱなし時の入力検出タイミングは、タイピング風となります。
 
キーボードを押したときに実行されるイベント

// ------------------------------------------------------------
// キーボードを押したときに実行されるイベント
// ------------------------------------------------------------
document.onkeydown = function (e){
	if(!e) e = window.event; // レガシー

	// 出力テスト
	console.log(e);
};
 
■KeyboardEvent オブジェクトについて
 
KeyboardEvent オブジェクトには、以下のプロパティがあります。(主要ブラウザで取得可)
 
プロパティ 解説
keyCode Number キーコード
shiftKey Boolean Shiftキーの押下状態
ctrlKey Boolean Ctrlキーの押下状態
altKey Boolean Altキーの押下状態
 
■取得例(イベントリスナー)
 
イベントリスナーを使って、キーボードが押されたかを調べる

// ------------------------------------------------------------
// キーボードを押したときに実行される関数
// ------------------------------------------------------------
function KeyDownFunc(e){

	// ------------------------------------------------------------
	// 入力情報を取得
	// ------------------------------------------------------------
	// キーコード
	var key_code = e.keyCode;
	// Shiftキーの押下状態
	var shift_key = e.shiftKey;
	// Ctrlキーの押下状態
	var ctrl_key = e.ctrlKey;
	// Altキーの押下状態
	var alt_key = e.altKey;

	// ------------------------------------------------------------
	// 出力テスト
	// ------------------------------------------------------------
	console.log("code:" + key_code);
	console.log("shift:" + shift_key);
	console.log("ctrl" + ctrl_key);
	console.log("alt:" + alt_key);
}


// ------------------------------------------------------------
// イベントのリッスンを開始する
// ------------------------------------------------------------
// イベントリスナーに対応している
if(document.addEventListener){

	// キーボードを押したときに実行されるイベント
	document.addEventListener("keydown" , KeyDownFunc);

// アタッチイベントに対応している
}else if(document.attachEvent){

	// キーボードを押したときに実行されるイベント
	document.attachEvent("onkeydown" , KeyDownFunc);

}
 
■取得例(イベントプロパティ)
 
イベントハンドラを使って、キーボードが押されたかを調べる

// ------------------------------------------------------------
// キーボードを押したときに実行されるイベント
// ------------------------------------------------------------
document.onkeydown = function (e){
	if(!e) e = window.event; // レガシー

	// ------------------------------------------------------------
	// 入力情報を取得
	// ------------------------------------------------------------
	// キーコード
	var key_code = e.keyCode;
	// Shiftキーの押下状態
	var shift_key = e.shiftKey;
	// Ctrlキーの押下状態
	var ctrl_key = e.ctrlKey;
	// Altキーの押下状態
	var alt_key = e.altKey;

	// ------------------------------------------------------------
	// 出力テスト
	// ------------------------------------------------------------
	console.log("code:" + key_code);
	console.log("shift:" + shift_key);
	console.log("ctrl" + ctrl_key);
	console.log("alt:" + alt_key);
};
 
 
 
 

キーボードが離されたか調べる

 


■キーボードが離されたか調べる


キーボードが離されたか調べるには、onkeyup イベントを使用します。
 
登録したコールバック関数の引数から、KeyboardEvent オブジェクトが得られます。
 
キーボードを離したときに実行されるイベント

// ------------------------------------------------------------
// キーボードを離したときに実行されるイベント
// ------------------------------------------------------------
document.onkeyup = function (e){
	if(!e) e = window.event; // レガシー

	// 出力テスト
	console.log(e);
};
 
■KeyboardEvent オブジェクトについて
 
KeyboardEvent オブジェクトには、以下のプロパティがあります。(主要ブラウザで取得可)
 
プロパティ 解説
keyCode Number キーコード
shiftKey Boolean Shiftキーの押下状態
ctrlKey Boolean Ctrlキーの押下状態
altKey Boolean Altキーの押下状態
 
■取得例(イベントリスナー)
 
イベントリスナーを使って、キーボードが離されたかを調べる

// ------------------------------------------------------------
// キーボードを離したときに実行される関数
// ------------------------------------------------------------
function KeyUpFunc(e){

	// ------------------------------------------------------------
	// 入力情報を取得
	// ------------------------------------------------------------
	// キーコード
	var key_code = e.keyCode;
	// Shiftキーの押下状態
	var shift_key = e.shiftKey;
	// Ctrlキーの押下状態
	var ctrl_key = e.ctrlKey;
	// Altキーの押下状態
	var alt_key = e.altKey;

	// ------------------------------------------------------------
	// 出力テスト
	// ------------------------------------------------------------
	console.log("code:" + key_code);
	console.log("shift:" + shift_key);
	console.log("ctrl" + ctrl_key);
	console.log("alt:" + alt_key);
}


// ------------------------------------------------------------
// イベントのリッスンを開始する
// ------------------------------------------------------------
// イベントリスナーに対応している
if(document.addEventListener){

	// キーボードを離したときに実行されるイベント
	document.addEventListener("keyup" , KeyUpFunc);

// アタッチイベントに対応している
}else if(document.attachEvent){

	// キーボードを離したときに実行されるイベント
	document.attachEvent("onkeyup" , KeyUpFunc);

}
 
■取得例(イベントプロパティ)
 
イベントハンドラを使って、キーボードが離されたかを調べる

// ------------------------------------------------------------
// キーボードを離したときに実行されるイベント
// ------------------------------------------------------------
document.onkeyup = function (e){
	if(!e) e = window.event; // レガシー

	// ------------------------------------------------------------
	// 入力情報を取得
	// ------------------------------------------------------------
	// キーコード
	var key_code = e.keyCode;
	// Shiftキーの押下状態
	var shift_key = e.shiftKey;
	// Ctrlキーの押下状態
	var ctrl_key = e.ctrlKey;
	// Altキーの押下状態
	var alt_key = e.altKey;

	// ------------------------------------------------------------
	// 出力テスト
	// ------------------------------------------------------------
	console.log("code:" + key_code);
	console.log("shift:" + shift_key);
	console.log("ctrl" + ctrl_key);
	console.log("alt:" + alt_key);
};
 

 
 

キーボードが押しっぱなしか調べる

 

■キーボードが押しっぱなしか調べる


1.配列を用意する
 
配列を1つ用意します。
 
この配列に、キーボードの入力状態を記録していきます。
 
配列を用意する

// キーボードの入力状態を記録する配列
var input_key_buffer = new Array();
 
2.キーボードの入力状態を、イベントハンドラで監視する
 
キーボードが押されたか調べるには、onkeydown イベントを使用します。
 
キーボードが離されたか調べるには、onkeyup イベントを使用します。
 
2つのイベントを使って、キーボードの入力状態を監視します。
 
キーボードの入力状態を監視する

// ------------------------------------------------------------
// キーボードを押したときに実行されるイベント
// ------------------------------------------------------------
document.onkeydown = function (e){
	if(!e) e = window.event; // レガシー

	console.log("キーボードが押された");
};

// ------------------------------------------------------------
// キーボードを離したときに実行されるイベント
// ------------------------------------------------------------
document.onkeyup = function (e){
	if(!e) e = window.event; // レガシー

	console.log("キーボードが離された");
};
 
3.入力されたキー情報を配列に記録する
 
登録したコールバック関数の引数から、KeyboardEvent オブジェクトが得られます。
 
KeyboardEvent オブジェクトの keyCode プロパティから、入力されたキーのキーコードが取得できます。
 
keyCode プロパティの値を使って、配列の番地にアクセスします。
 
「キーが押されたら true」、「キーが離されたら false」に変更します。
 
入力されたキー情報を配列に記録する

// キーボードの入力状態を記録する配列
var input_key_buffer = new Array();

// ------------------------------------------------------------
// キーボードを押したときに実行されるイベント
// ------------------------------------------------------------
document.onkeydown = function (e){
	if(!e) e = window.event; // レガシー

	input_key_buffer[e.keyCode] = true;
};

// ------------------------------------------------------------
// キーボードを離したときに実行されるイベント
// ------------------------------------------------------------
document.onkeyup = function (e){
	if(!e) e = window.event; // レガシー

	input_key_buffer[e.keyCode] = false;
};
 
4.ウィンドウが非アクティブか調べる
 
キーボードを押しながら、ウィンドウを非アクティブにすると、押しっぱなしと判定されてしまいます。
 
ウィンドウが非アクティブになったときは、配列に記録した入力情報をクリアします。
 
ウィンドウが非アクティブになる瞬間を調べるには、onblur イベントを使用します。
 
ウィンドウが非アクティブになる瞬間を調べる

// キーボードの入力状態を記録する配列
var input_key_buffer = new Array();

// ------------------------------------------------------------
// キーボードを押したときに実行されるイベント
// ------------------------------------------------------------
document.onkeydown = function (e){
	if(!e) e = window.event; // レガシー

	input_key_buffer[e.keyCode] = true;
};

// ------------------------------------------------------------
// キーボードを離したときに実行されるイベント
// ------------------------------------------------------------
document.onkeyup = function (e){
	if(!e) e = window.event; // レガシー

	input_key_buffer[e.keyCode] = false;
};

// ------------------------------------------------------------
// ウィンドウが非アクティブになる瞬間に実行されるイベント
// ------------------------------------------------------------
window.onblur = function (){

	// 配列をクリアする
	input_key_buffer.length = 0;
};
 
5.キーボードの入力状態を調べる
 
最後に、調べたいキーコード番号を使って、配列の番地にアクセスします。
 
結果が真であれば、キーボードが押されています。
 
結果が偽であれば、キーボードが離されています。
 
キーボードが押されているか調べる関数を用意する

// キーボードの入力状態を記録する配列
var input_key_buffer = new Array();

// ------------------------------------------------------------
// キーボードを押したときに実行されるイベント
// ------------------------------------------------------------
document.onkeydown = function (e){
	if(!e) e = window.event; // レガシー

	input_key_buffer[e.keyCode] = true;
};

// ------------------------------------------------------------
// キーボードを離したときに実行されるイベント
// ------------------------------------------------------------
document.onkeyup = function (e){
	if(!e) e = window.event; // レガシー

	input_key_buffer[e.keyCode] = false;
};

// ------------------------------------------------------------
// ウィンドウが非アクティブになる瞬間に実行されるイベント
// ------------------------------------------------------------
window.onblur = function (){
	// 配列をクリアする
	input_key_buffer.length = 0;
};

// ------------------------------------------------------------
// キーボードが押されているか調べる関数
// ------------------------------------------------------------
function KeyIsDown(key_code){

	if(input_key_buffer[key_code])	return true;

	return false;
}


// ------------------------------------------------------------
// 一定の時間隔で実行する
// ------------------------------------------------------------
setInterval(function (){

	// Aキーが押されているか調べる
	if(KeyIsDown(65)){
		console.log("Aキーが押されている");
	}else{
		console.log("Aキーが離されている");
	}

	// スペースキーが押されているか調べる
	if(KeyIsDown(32)){
		console.log("スペースキーが押されている");
	}else{
		console.log("スペースキーが離されている");
	}

},1000/60);
 

■上下左右キーで、エレメントを操作する例

 
上下左右キーで、エレメントを操作する例

<html>
  <body>

    <div id="aaa" style="position:absolute; width:100px; height:100px; border:10px #A00 solid; backgroundColor:#F44;" ></div>

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// キーボードの入力を監視するコンストラクタ関数
	// ------------------------------------------------------------
	function InputKeyboard(){

		// ------------------------------------------------------------
		// プライベートな変数
		// ------------------------------------------------------------
		var _input_key_buffer = null;

		// ------------------------------------------------------------
		// プライベートな関数
		// ------------------------------------------------------------
		function KeyDownFunc (e){
			_input_key_buffer[e.keyCode] = true;
		}
		function KeyUpFunc (e){
			_input_key_buffer[e.keyCode] = false;
		}
		function BlurFunc (e){
			_input_key_buffer.length = 0;
		}

		// ------------------------------------------------------------
		// キーコードを指定して入力状態を取得する
		// ------------------------------------------------------------
		this.isDown = function (key_code){
			if(_input_key_buffer[key_code])	return true;
			return false;
		};

		// ------------------------------------------------------------
		// 解放する
		// ------------------------------------------------------------
		this.release = function (){
			if(window.removeEventListener){
				document.removeEventListener("keydown",KeyDownFunc);
				document.removeEventListener("keyup",KeyUpFunc);
				window.removeEventListener("blur",BlurFunc);
			}else if(window.detachEvent){
				document.detachEvent("onkeydown",KeyDownFunc);
				document.detachEvent("onkeyup",KeyUpFunc);
				window.detachEvent("onblur",BlurFunc);
			}
		};

		// ------------------------------------------------------------
		// 初期化
		// ------------------------------------------------------------
		(function (){
 			_input_key_buffer = new Array();

			if(window.addEventListener){
				document.addEventListener("keydown",KeyDownFunc);
				document.addEventListener("keyup",KeyUpFunc);
				window.addEventListener("blur",BlurFunc);
			}else if(window.attachEvent){
				document.attachEvent("onkeydown",KeyDownFunc);
				document.attachEvent("onkeyup",KeyUpFunc);
				window.attachEvent("onblur",BlurFunc);
			}
		})();
	}


	// ------------------------------------------------------------
	// 初期化
	// ------------------------------------------------------------
	// InputKeyboard オブジェクトを作成
	var input_key = new InputKeyboard();

	// id 属性が、"aaa" であるエレメントを取得
	var element = document.getElementById("aaa");

	// 座標
	var pos_x = 0;
	var pos_y = 0;


	// ------------------------------------------------------------
	// 一定の時間隔で実行
	// ------------------------------------------------------------
	// 60 フレームレート間隔で実行
	setInterval(function (){

		// 上キーが押された
		if(input_key.isDown(38))	pos_y -= 10;

		// 下キーが押された
		if(input_key.isDown(40))	pos_y += 10;

		// 左キーが押された
		if(input_key.isDown(37))	pos_x -= 10;

		// 右キーが押された
		if(input_key.isDown(39))	pos_x += 10;

		// エレメントの位置を更新
		element.style.left = (pos_x) + "px";
		element.style.top  = (pos_y) + "px";

	},1000/60);


	// ------------------------------------------------------------
	// キーボードの入力監視を終了
	// ------------------------------------------------------------
	//input_key.release();
	//input_key = null;

    //-->
    </script>

  </body>
</html>
 

 
 

キーコードの一覧表

 
 


■キーコードの一覧表


各ブラウザで共通して使用できるキーコードの一覧です。
 
各ブラウザでコードが変わるキーは除外しています。
 
■英数字キー

A~Z、0~9までのキーコードの一覧表です。
 
キー keyCode
0 48
1 49
2 50
3 51
4 52
5 53
6 54
7 55
8 56
9 57
A 65
B 66
C 67
D 68
E 69
F 70
G 71
H 72
I 73
J 74
K 75
L 76
M 77
N 78
O 79
P 80
Q 81
R 82
S 83
T 84
U 85
V 86
W 87
X 88
Y 89
Z 90
 
■ファンクションキー

ファンクションキーのキーコードの一覧表です。
 
キー keyCode
F1 112
F2 113
F3 114
F4 115
F5 116
F6 117
F7 118
F8 119
F9 120
F10 121
F11 122
F12 123
F13 124
F14 125
F15 126
 
■その他のキー

その他のキーコードの一覧表です。
 
キー keyCode
BackSpace 8
Tab 9
Clear 12
Enter 13
Command 15
Shift 16
Ctrl 17
Alt 18
CapsLock 20
Esc 27
スペースバー 32
PageUp 33
PageDown 34
End 35
Home 36
← (左矢印) 37
↑ (上矢印) 38
→ (右矢印) 39
↓ (下矢印) 40
Insert 45
Delete 46
NumLock 144
, < 188
. > 190
/ ? 191
[ { 219
\ | 220
] } 221
 
使用例です。
 
スペースキーが押されたか調べる

// ------------------------------------------------------------
// キーボードを押したときに実行されるイベント
// ------------------------------------------------------------
document.onkeydown = function (e){
	if(!e) e = window.event; // レガシー

	if(e.keyCode == 32){
		console.log("スペースキーが押された");
	}
};
 
Aキーが離されたか調べる

// ------------------------------------------------------------
// キーボードを離したときに実行されるイベント
// ------------------------------------------------------------
document.onkeyup = function (e){
	if(!e) e = window.event; // レガシー

	if(e.keyCode == 65){
		console.log("Aキーが離された");
	}
};
 

 
 

キーボード操作を無効化する

 


■キャンセルに対応しているイベント

 
以下のイベントは、キャンセルに対応しています。(一部抜粋)
 
イベント名 解説
onkeydown KeyboardEvent キーボードを押すと実行されるイベント
onkeyup KeyboardEvent キーボードを離すと実行されるイベント
onkeypress KeyboardEvent キーボードを押すと実行されるイベント
 

■ onmousedown イベントのキャンセルについて

 
■中止可能な機能
 
キーボード入力によるブラウザの操作を、阻止する事ができます。
 
ブラウザの、多くのショートカットキーが動作しなくなります。
 
例えば、「BackSpace」の戻る、「F5」のリロード、「矢印キー」のスクロールなどがあります。
 
■ F5 リロード(Ctrl+R)を無効化する
 
アンロード直前の警告表示については、こちらで解説しています。
 
キーボード操作によるリロードを無効化する

// ------------------------------------------------------------
// キーボードを押したときに実行されるイベント
// ------------------------------------------------------------
document.onkeydown = function (e){
	if(!e) e = window.event; // レガシー

	// ------------------------------------------------------------
	// 「F5」か「Ctrl+R」が押されている
	// ------------------------------------------------------------
	if( (e.keyCode == 116) || (e.ctrlKey && (e.keyCode == 82)) ){

		// ------------------------------------------------------------
		// キーボード操作をキャンセルする
		// ------------------------------------------------------------
		if(e.preventDefault){
			// デフォルトの動作を無効化する
			e.preventDefault();
		}else{
			// デフォルトの動作を無効化する(非標準)
			e.keyCode = 0;
			return false;
		}
	}
};
 

■ onkeypress イベントのキャンセルについて

 
■中止可能な機能
 
キーボード操作による、コントロール要素への入力を、阻止する事ができます。
 
ただし、IME 入力やペースト入力は、阻止できません。
 
キーボード操作によるコントロール要素への入力をキャンセルする

<html>
  <body>

    <input type="text" id="my_input" >

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// id 属性が、"my_input" であるエレメントを取得
	// ------------------------------------------------------------
	var element = document.getElementById("my_input");

	// ------------------------------------------------------------
	// キーボードを押すと実行されるイベント
	// ------------------------------------------------------------
	element.onkeypress = function (e){
		if(!e) e = window.event; // レガシー

		// ------------------------------------------------------------
		// キーボード操作をキャンセルする
		// ------------------------------------------------------------
		if(e.preventDefault){
			// デフォルトの動作を無効化する
			e.preventDefault();
		}else{
			// デフォルトの動作を無効化する(非標準)
			return false;
		}
	};

    //-->
    </script>

  </body>
</html>