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

2021-01-252023-02-27JavaScript イベント,JavaScript

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

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

キーボードの入力イベントの実装サンプル

addEventListener()メゾッドを利用したキーボード入力イベントの実装サンプルとサンプルコードになります。

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」を利用して紹介しています。

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

特定のキー入力イベントを実装する場合、「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」が代入されます。（デバイスの設定に依存し、逆になっている場合もあります。）

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

矢印キー（方向キー）などのキーは「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」一覧表です。