JavaScript - Shiftキー & Anyキーの入力イベント

JavaScriptでShiftキーといずれかのキーが同時に押された時をトリガーにしたイベントを実装する簡単なコード例を紹介しています。

HTMLには、キーの入力を検出可能な対象として<div>タグにid名「target」を指定しています。

コード例では「tabindex」を指定する事でフォーカスを可能にし、キーの入力イベントを実行可能にします。
テキスト入力フォームや「document」全体を対象とする場合は不要です。

<div id="target" tabindex="0">Shiftといずれかのキーを押して下さい</div>

CSSでは、イベントの対象とするためのサイズを設定しています。

#target {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	padding: 10px;
	color: white;
	width: 250px;
	height: 250px;
	border-radius: 50%;
	text-align: center;
	cursor: pointer;
	background-color: #4b0082;
}

/* フォーカス時の枠線を指定 */
#target:focus {
	outline: 2px solid #000fff;
}

対象とする要素はquerySelector()で指定、addEventListener()で「keydown」を指定してキーが押された時をトリガーにしたイベントを設定します。

「event.key != 'Shift'」として押されたキーがShiftキーではなく、かつ「event.shiftKey」でShiftキーがすでに押されている場合を条件に処理を実行します。

「keyup」にて同様にイベントを実装し、いずれかのキーが離された時に要素に表示している内容を削除しています。

// 出力エリア
let target = document.querySelector('#target');

target.addEventListener('keydown', () => {
	// デフォルトの処理を実行しない
	event.preventDefault();
	// Shiftキーが押されているかどうか
	if (event.key != 'Shift' && event.shiftKey) {
		// ターゲット要素内に
		target.innerHTML = 'Shift + ' + event.key;
	}
});

target.addEventListener('keyup', () => {
	// ターゲットの表示を削除
	target.innerHTML = 'Shiftといずれかのキーを押して下さい';
});