JavaScriptでキーボード入力時に処理を実行するのに便利なkeydown・keyup・keypressイベントの使い方

キーボード操作時に処理を追加する

JavaScriptでキーボード入力時に処理を追加する場合はkeydownkeyupkeypressイベントを利用します。

イベント

イベント発生タイミング
keydownキーが押された時
keyupキーが離された時
keypress文字を生成するキーが押された時
キーボード入力に関するイベント

サンプルコード

サンプルコードとして、キーボード入力を行った時に、その処理に応じて文字列を出力するサンプルコードを紹介します。

Output

ページのどこでも良いのでキーボード入力してみましょう。すると、文字列が出力されます。

Pug
p ページのどこでも良いのでキーボード入力してみましょう。すると、文字列が出力されます。
	#targetText
JavaScript
const targetText = document.getElementById('targetText');

window.addEventListener('keydown', () => {
  targetText.textContent = 'キーが押されています。';
});

window.addEventListener('keyup', () => {
  targetText.textContent = 'キーが離されました。';
});

window.addEventListener('keypress', () => {
  targetText.textContent = '文字を生成するキーが押されています。';
});
インストラクター
コメント

コメントを残す