JavaScriptでキーボード入力された時にどのキーなのかを調べるのに便利なプロパティ

キーボード入力時にどのキーなのかを調べる

JavaScriptでは、キーボード入力を検知するための方法が用意されています。

ここでは、キーボード入力の検知時に、どのキーを入力したかを調べる方法を紹介します。

これらの処理は、キー入力に応じて特定の処理を行いたい場合に重宝します。

プロパティ

プロパティ意味
キーボードイベント.key押されたボタンの値文字列
キーボードイベント.code押されたボタンのコード文字列
キーボードイベント.altKeyAltキーが押されたどうか真偽値
キーボードイベント.ctrlKeyctrlキーが押されたどうか真偽値
キーボードイベント.shiftKeyshiftキーが押されたどうか真偽値
キーボードイベント.metaKeymetaキーが押されたどうか真偽値
キーボードイベント.repeatキーを押しっぱなしにしているかどうか真偽値
キーボードイベント.isComposingテキスト入力中で値が未確定かどうか真偽値
キー入力に関するイベント

サンプルコード

サンプルコードとしてキーボードを「押した時」に、このページ上の各プロパティの結果を出力するスクリプトを紹介します。

Output
event.key;
event.code;
event.altKey;
event.ctrlKey;
event.shiftKey;
event.metaKey;
event.repeat;
event.isComposing;
Pug
table.table
			tbody
				tr
					th event.key;
					td#targetText0 
				tr
					th event.code;
					td#targetText1
				tr
					th event.altKey;
					td#targetText2
				tr
					th event.ctrlKey;
					td#targetText3
				tr
					th event.shiftKey;
					td#targetText4
				tr
					th event.metaKey;
					td#targetText5
				tr
					th event.repeat;
					td#targetText6
				tr 
					th event.isComposing;
					td#targetText7
JavaScript
const targetText0 = document.getElementById( 'targetText0' );
const targetText1 = document.getElementById( 'targetText1' );
const targetText2 = document.getElementById( 'targetText2' );
const targetText3 = document.getElementById( 'targetText3' );
const targetText4 = document.getElementById( 'targetText4' );
const targetText5 = document.getElementById( 'targetText5' );
const targetText6 = document.getElementById( 'targetText6' );
const targetText7 = document.getElementById( 'targetText7' );

window.addEventListener('keydown', ( event ) => {
	targetText0.textContent = event.key;
	targetText1.textContent = event.code;
	targetText2.textContent = event.altKey;
	targetText3.textContent = event.ctrlKey;
	targetText4.textContent = event.shiftKey;
	targetText5.textContent = event.metaKey;
	targetText6.textContent = event.repeat;
	targetText7.textContent = event.isComposing;
});
インストラクター
コメント

コメントを残す