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

・	キーボードが押されたか調べる
・	キーボードが離されたか調べる
・	キーボードが押しっぱなしか調べる
・	キーコードの一覧表
・	キーボード操作を無効化する

前のページに戻る

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

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

キーボードが押されたか調べるには、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);
};

上に戻る

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

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

１．配列を用意する

配列を１つ用意します。

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

配列を用意する


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

２．キーボードの入力状態を、イベントハンドラで監視する

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

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

２つのイベントを使って、キーボードの入力状態を監視します。

キーボードの入力状態を監視する


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

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

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

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

３．入力されたキー情報を配列に記録する

登録したコールバック関数の引数から、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;
};

４．ウィンドウが非アクティブか調べる

キーボードを押しながら、ウィンドウを非アクティブにすると、押しっぱなしと判定されてしまいます。

ウィンドウが非アクティブになったときは、配列に記録した入力情報をクリアします。

ウィンドウが非アクティブになる瞬間を調べるには、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;
};

５．キーボードの入力状態を調べる

最後に、調べたいキーコード番号を使って、配列の番地にアクセスします。

結果が真であれば、キーボードが押されています。

結果が偽であれば、キーボードが離されています。

キーボードが押されているか調べる関数を用意する


// キーボードの入力状態を記録する配列
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 (){

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

	// スペースキーが押されているか調べる
	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>

上に戻る

キーコードの一覧表

■キーコードの一覧表

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

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

■英数字キー

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

キー	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("Ａキーが離された");
	}
};

上に戻る

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

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

以下のイベントは、キャンセルに対応しています。（一部抜粋）

イベント名	型	解説
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>

上に戻る

前のページに戻る