JavaScript | キーボードイベントの実装方法(addEventListener版)

2021-01-27JavaScript,JavaScript イベント

キーボード入力の取得イベントを実装する方法

JavaScriptだけでキーボードの入力情報を「addEventListener」で取得して発火イベントを実装する方法のサンプルコード集です。

「onkeydown」「onkeypress」「onkeyup」などのDOM oneventハンドラーでの実装方法は別記事にての紹介となっています。

See the Pen JavaScript addEventListener key event by yochans (@yochans) on CodePen.

上記の動作サンプルとして紹介している処理のサンプルコードになります。

<p id="output"></p>
document.addEventListener('keypress', keypress_ivent);
document.addEventListener('keyup', keyup_ivent);

function keypress_ivent(e) {
	document.getElementById('output').innerHTML = e.key;
	return false; 
}

function keyup_ivent(e) {
	document.getElementById('output').innerHTML = '';
	return false; 
}

キーボードの入力を取得する

キーボードの入力を取得するにはaddEventListener()を利用します。

キーボードのいずれかのキーが押された時の処理には「keypress」、押されている間実行を繰り返す場合は「keydown」キーが離された時の処理には「keyup」を第一引数に指定します。
第二引数には呼び出す関数が指定できます。

document.addEventListener('keypress', keypress_ivent);

function keypress_ivent(e) {
	//いずれかのキーが押された時の処理
	return false; 
}
document.addEventListener('keydown', keypress_ivent);

function keydown_ivent(e) {
	//いずれかのキーが押されている時の処理
	return false; 
}
document.addEventListener('keyup', keyup_ivent);

function keyup_ivent(e) {
	//いずれかのキーが離された時の処理
	return false; 
}

キーボード入力イベントの種類

addEventListener()で利用できるキー入力イベントの種類まとめです。

サンプルでは矢印キーの操作などを除いて主に「keypress」「keyup」を利用して紹介しています。

keypressいずれかのキーが押された時
押された時に一度だけ実行する
Keydowmいずれかのキーが押されている時
押されている間、連続して実行する
殆どのキーを取得する
keyupいずれかの押されていたキーが離された時

特定のキー入力イベントを実装する

特定のキー入力イベントを実装する場合、「key」「keyCode」「code」の情報を元に判別します。

「key」と「keyCode」はデバイスの英字入力設定に依存して大文字・小文字を区別して取得しますのでいずれの場合も処理したい場合は大文字・小文字の両方を判別フラグに含めます。

また「code」は大文字・小文字の区別なく同一のコードを取得していますので、以下の様に記述可能となっています。

Aキーが押された場合の処理(e.key)

document.addEventListener('keypress', keypress_ivent);

function keypress_ivent(e) {
	if(e.key === 'a' || e.key === 'A'){
		//Aキーが押された時の処理
	}
	return false; 
}

Aキーが押された場合の処理(e.code

document.addEventListener('keypress', keypress_ivent);

function keypress_ivent(e) {
	if(e.code === 'KeyA'){
		//Aキーが押された時の処理
	}
	return false; 
}

Enterキーが押された場合の処理(e.code)

Enterキーはいずれの場合も、「key」「code」ともに「Enter」となっています。

document.addEventListener('keypress', keypress_ivent);

function keypress_ivent(e) {
	if(e.code === 'Enter'){
		//Enterキーが押された時の処理
	}
	return false; 
}

Enterキーが押された場合の処理(e.keyCode)

「keyCode」はキーの番号で扱う事が可能です。
Enterキーの場合は「keyCode」にて「13」となっています。

document.addEventListener('keypress', keypress_ivent);

function keypress_ivent(e) {
	if(e.code === 'Enter'){
		//Enterキーが押された時の処理
	}
	return false; 
}

「key」「code」「keyCode」の一覧をこのページの最後で紹介していますので是非ご活用下さい。

ShiftキーやCtrl、altキーの同時押しイベントの実装方法

ShiftキーやCtrl、altキーとの同時押しを取得したキーイベントを実装する方法です。

これらのキーは別のキーを押された際に取得するキー入力イベント情報に押されているかどうかの情報が入っていますので、それらを参照します。

例えば、Shiftキーの同時押しのみを検出する場合、「shiftKey」を参照します。
Shiftキーが押されている場合、「shiftKey」は「true」となっていますので判別します。

document.addEventListener('keydown', key_press_ivent);

function keydown_ivent(e) {
	if(e.shiftKey === true){
		document.getElementById('output').innerHTML = e.key;
	}
	return false;
}

※Shiftキーが同時に押されている場合、取得した情報の「key」には通常はアルファベットなら「a」ではなく大文字として「A」が代入されます。(デバイスの設定に依存し、逆になっている場合もあります。)

Shiftキーe.shiftKey
Ctrlキーe.ctrlKey
Altキーe.altKey

矢印キーを使ったキー入力イベントの実装方法

矢印キー(方向キー)などのキーは「keypress」で取得できませんので「keydown」を利用して取得します。

See the Pen JavaScript addEventListener arrow key event by yochans (@yochans) on CodePen.

document.addEventListener('keydown', keydown_ivent);
document.addEventListener('keyup', keyup_ivent);

function keydown_ivent(e) {
	
	let key = '';
	switch (e.key) {
		case 'ArrowUp':
			key = '↑';
			break;
		case 'ArrowDown':
			key = '↓';
			break;
		case 'ArrowLeft':
			key = '←';
			break;
		case 'ArrowRight':
			key = '→';
			break;
	}
	
	document.getElementById('output').innerHTML = key;
	return false;
}

function keyup_ivent(e) {
	document.getElementById('output').innerHTML = '';
	return false; 
}

キー名、キーコード名一覧

「keypress(一部)」や「「keydown」「keyup」で取得可能な各キーの「key」「code」「keyCode」一覧表です。

e.keye.codee.keyCode
Back SpaceBackspaceBackspace8
TabTabTab9
EnterEnterEnter
NumpadEnter
13
ShiftShiftShiftLeft
ShiftRight
16
CtrlControlControlLeft
ControlRight
17
AltAltAltLeft
AltRight
18
PausePausePause19
EscEscapeEscape27
スペースキー" “Space32
PageUpPageUpPageUp33
PageDownPageDownPageDown34
EndEndEnd35
HomeHomeHome36
InsertInsertInsert45
DeleteDeleteDelete46
0~90~9Digit0~Digit948~57
A~ZaA~zZKeyA~KeyZ65~90
WindowsキーMetaMetaLeft91
0~9(テンキー)0~9Numpad0~Numpad996~105
*(テンキー)*NumpadMultiply106
+(テンキー)+NumpadAdd107
-(テンキー)NumpadSubtract109
.(テンキー).NumpadDecimal110
/(テンキー)/NumpadDivide111
F1~F12F1~F12F1~F12112~F123
Num LockNumLockNumLock144
Scroll LockScrollLockScrollLock145
: *入力値Quote186
; +入力値Semicolon187
, <入力値Comma188
– =入力値Minus189
. >入力値Period190
/ ?入力値Slash191
@ `入力値BracketLeft192
[ {入力値BracketRight219
\ |入力値IntlYen220
] }入力値Backslash221
^ ~入力値Equal222
\ _入力値IntlRo226
Caps LockAlphanumericCapsLock240
半角/全角Hankaku
Zenkaku
Backquote243
244

2021-01-27JavaScript,JavaScript イベント

Posted by Yousuke.U