JavaScriptプログラミング講座【キーボード操作について】

キーボードの操作について

・	キーボードが押されたか調べる
・	キーボードが離されたか調べる
・	キーボードが押しっぱなしか調べる
・	キーコードの一覧表

前のページに戻る

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

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

キーボードが押されたか調べるには、onkeydown イベントを使用します。

キーボードを押したときに実行されるイベント


// キーボードを押したときに実行されるイベント
document.onkeydown = function(e){
}

登録した関数の引数から KeyboardEvent オブジェクトが得られます。KeyboardEvent オブジェクトには、以下のプロパティがあります。

プロパティ	解説
keyCode	キーコード
shiftKey	Shiftキーの押下状態
ctrlKey	Ctrlキーの押下状態
altKey	Altキーの押下状態

取得例です。

キーボードが押されたときに関数が呼び出されるように登録する


// キーボードを押したときに実行されるイベント
document.onkeydown = function(e){

	// InternetExplorer用
	if (navigator.appName.indexOf("Microsoft") != -1)	e = event;

	console.log(e.keyCode);		// キーコード
	console.log(e.shiftKey);	// Shiftキーの押下状態
	console.log(e.ctrlKey);		// Ctrlキーの押下状態
	console.log(e.altKey);		// Altキーの押下状態
}

上に戻る

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

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

キーボードが離されたか調べるには、onkeyup イベントを使用します。

キーボードを離したときに実行されるイベント


// キーボードを離したときに実行されるイベント
document.onkeyup = function(e){
}

登録した関数の引数から KeyboardEvent オブジェクトが得られます。KeyboardEvent オブジェクトには、以下のプロパティがあります。

プロパティ	解説
keyCode	キーコード

取得例です。

キーボードが離されたときに関数が呼び出されるように登録する


// キーボードを離したときに実行されるイベント
document.onkeyup = function(e){

	// InternetExplorer用
	if (navigator.appName.indexOf("Microsoft") != -1)	e = event;

	console.log(e.keyCode);		// キーコード
}

上に戻る

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

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

キーボードが押しっぱなしか調べるには、上で紹介したイベントハンドラ２つと変数１つを使って調べます。

まず、onkeydown イベントが呼ばれた時点で変数を true に変更します。そして、onkeyup イベントが呼ばれた時点で変数を false に変更します。

これで、変数が true の間のみキーボードが押しっぱなしである事がわかります。

スペースキーが押しっぱなしであるか調べる


var space_flg = false;

// キーボードを押したときに実行されるイベント
document.onkeydown = function(e){

	// InternetExplorer用
	if (navigator.appName.indexOf("Microsoft") != -1)	e = event;

	if(event.keyCode == 32){
		space_flg = true;
	}
}

// キーボードを離したときに実行されるイベント
document.onkeyup = function(e){

	// InternetExplorer用
	if (navigator.appName.indexOf("Microsoft") != -1)	e = event;

	if(event.keyCode == 32){
		space_flg = false;
	}
}

// 60 フレームレート間隔で実行
setInterval(function(){
	if(space_flg){
		console.log("スペースキーが押されている");
	}else{
		console.log("スペースキーが押されていない");
	}
},1000/60);

キーボードを押しながらウィンドウを非アクティブにすると押しっぱなしになってしまうので、ウィンドウが非アクティブになったときはキーボードを離すようにします。

非アクティブになる瞬間を調べるには、onblur イベントを使用します。

スペースキーが押しっぱなしであるか調べる


var space_flg = false;

// キーボードを押したときに実行されるイベント
document.onkeydown = function(e){

	// InternetExplorer用
	if (navigator.appName.indexOf("Microsoft") != -1)	e = event;

	if(event.keyCode == 32){
		space_flg = true;
	}
}

// キーボードを離したときに実行されるイベント
document.onkeyup = function(e){

	// InternetExplorer用
	if (navigator.appName.indexOf("Microsoft") != -1)	e = event;

	if(event.keyCode == 32){
		space_flg = false;
	}
}

// 非アクティブ時に呼び出されるイベント
window.onblur = function(){
    space_flg = false;
}

// 60 フレームレート間隔で実行
setInterval(function(){
	if(space_flg){
		console.log("スペースキーが押されている");
	}else{
		console.log("スペースキーが押されていない");
	}
},1000/60);

■すべてのキーが押しっぱなしか調べる

すべてのキーが押しっぱなしであるかを調べる例です。

すべてのキーが押しっぱなしであるか調べる


var key = new Array();

// キー状態の初期化
KeyInitialize();
function KeyInitialize(){
	var i;
	for(i=0;i < 255;i++){
		key[i] = false;
	}
}

// キーが押しっぱなしか調べる
function KeyisDown(code){
	return key[code];
}

// キーボードを押したときに実行されるイベント
document.onkeydown = function(e){

	// InternetExplorer用
	if (navigator.appName.indexOf("Microsoft") != -1)	e = event;

	key[e.keyCode] = true;
}

// キーボードを離したときに実行されるイベント
document.onkeyup = function(e){

	// InternetExplorer用
	if (navigator.appName.indexOf("Microsoft") != -1)	e = event;

	key[e.keyCode] = false;
}

// 非アクティブ時に呼び出されるイベント
window.onblur = function(){
    KeyInitialize();
}

// 60 フレームレート間隔で実行
setInterval(function(){
	if(KeyisDown(32)){
		console.log("スペースキーが押されている");
	}else{
		console.log("スペースキーが押されていない");
	}

	if(KeyisDown(65)){
		console.log("A キーが押されている");
	}else{
		console.log("A キーが押されていない");
	}
},1000/60);

上に戻る

キーコードの一覧表

■キーコードの一覧表

各ブラウザで共通して使用できるキーコードの一覧です。

各ブラウザでコードが変わるキーは除外しています。

■英数字キー

Ａ～Ｚ、０～９までのキーコードの一覧表です。

キー	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){

    // InternetExplorer用
    if(!e)	e = window.event;

    if(e.keyCode == 32){
    	console.log("スペースキーが押された");
    }
}

Aキーが離されたとき


// キーボードを押したときに実行されるイベント
document.onkeyup = function(e){

    // InternetExplorer用
    if(!e)	e = window.event;

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

上に戻る

前のページに戻る