JavaScript - キーの長押しイベント

JavaScriptで指定したキーの長押しされた時に実行するイベントの簡単なコード例になります。

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

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

<div id="target" tabindex="0">スペースキーを長押し押して下さい</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;
	user-select: none;
	transition: 1s;
	background: #dc143c;
}

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

「event.keyCode」にて、スペースキーのコード「32」だった場合にイベントタイマーを作成、指定時間の間キーが離されなければイベントを実行します。

「keyup」にて同様にイベントを実装し、スペースキーが離された時にイベントタイマーを解除しています。

// ターゲットの要素
let target = document.querySelector('#target');

// イベントのタイマーID
let eventTimerId;

// キーダウンイベント
target.addEventListener('keydown', () => {
	// スペースキーかどうか
	if (event.keyCode == 32) {
		// デフォルトの処理を実行しない
		event.preventDefault();
		// タイマーをセットしてイベントのタイマーIDを作成
		// 長押しと判定する時間（ミリ秒）
		eventTimerId = setTimeout(function () {
			// キーが長押しされた時の処理
			if (window.getComputedStyle(target).borderRadius !== '0%') {
				target.style.borderRadius = '0%';
			} else {
				target.style.borderRadius = '50%';
			}

		}, 1000);
	}
});

// マウスで左ボタンが離された時
target.addEventListener('keyup', () => {
	// スペースキーかどうか
	if (event.keyCode == 32) {
		// イベントのタイマーをクリアする
		clearTimeout(eventTimerId);
	}
});