JavaScript | キーの長押しイベントの実装する方法

2023-02-27JavaScript イベント,JavaScript

JavaScriptのaddEventListener()メソッドを使ったキーの長押しイベントの実装する方法とサンプルコードを紹介しています。

以下はキーの長押しイベントを実装した動作サンプルになります。

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

キーの長押しイベントの実装する

JavaScriptでキーボード入力によるキーの長押しイベントの実装するにはaddEventListener()メソッドの「keydown」イベントを利用する事ができます。

このサンプルコードでは以下の手順でキーの長押しイベントを実装しています。

1. setTimeout()メソッドで作成するイベントのIDを作成する
2. addEventListener()メソッドで「keydown」イベントを発行
3. キーが押された際に、指定したキーでのみ機能する様に判定する
4. 先に作成したイベントのIDでsetTimeout()メソッドでイベントを発行する
5. setTimeout()メソッドで長押しする指定時間の指定、時間後に動く処理を書く
6. 別途キーが離された時のイベントをaddEventListener()メソッドで「keyup」で発行
7. キーが離された時に、setTimeout()メソッドのイベントIDをクリアする

以下のサンプルコードでは「A」キーが1秒以上長押しされた際に動くイベントを実装しています。

let key_ivent_timer_id;

// キーが押された時
document.addEventListener('keydown', (e) => {
	// 入手されたキー、e.repeatで初回かどうかを判定
	if (e.code === 'KeyA') {
		// タイマーをセットする
		key_ivent_timer_id = setTimeout(function () {
			// キーが長押しされた時の処理
			console.log('キーが長押しされました。');
		}, 1000); // 長押しと判定する時間（ミリ秒）

	}
});

// キーが離された時
document.addEventListener('keyup', (e) => {
	// 離されたキーを判定する
	if (e.code === 'KeyA') {
		// タイマーをクリアする
		clearTimeout(key_ivent_timer_id);
	}
});

上記のサンプルコードでは、キーが指定した時間以上押されている間、イベントは指定した時間間隔で実行を続けます。

キーが長押しされた時に一度だけ実行する場合は、キーの判定と一緒にキーイベントから「repeat」が false になっているかどうかを判定します。
キーイベントの「repeat」はイベントの初回実行時のみ false を、2回目から true を返します。

以下のサンプルコードでは「A」キーが1秒間長押しされた際に一度だけ動くイベントを実装しています。
1秒以内にキーが離された場合は実行されません。

let key_ivent_timer_id;

// キーが押された時
document.addEventListener('keydown', (e) => {
	// 入手されたキー、e.repeatで初回かどうかを判定
	if (e.code === 'KeyA' && e.repeat == false) {
		// タイマーをセットする
		key_ivent_timer_id = setTimeout(function () {
			// キーが長押しされた時の処理
			console.log('キーが長押しされました。');
		}, 1000); // 長押しと判定する時間（ミリ秒）

	}
});

// キーが離された時
document.addEventListener('keyup', (e) => {
	// 離されたキーを判定する
	if (e.code === 'KeyA') {
		// タイマーをクリアする
		clearTimeout(key_ivent_timer_id);
	}
});