JavaScriptのkeydownおよびkeyupイベントは、キーボード入力に反応するための非常に便利なイベントです。これらを活用することで、キーが押された瞬間や離された瞬間を検知し、リアルタイムでインタラクティブな挙動を実現することが可能です。今回は、それぞれのイベントの基本的な使い方から応用例までをまとめていきたいと思います。
keydownイベントは、キーボードのキーが押されたときに発生します。このイベントはキーが押され続けている間も発生し続けるため、キーの長押しを検知する用途にも利用できます。
一方、keyupイベントは、キーが離された瞬間に発生します。このイベントは、特定のキーの押下が終了したことを検知するために使用されます。
以下の例では、入力されたキーの情報をリアルタイムで取得して表示します。
See the Pen keydown() / keyup() by tones (@tonescodedesign) on CodePen.
const output = document.getElementById('output');
document.addEventListener('keydown', (event) => {
output.textContent = `キーが押されました: ${event.key} (コード: ${event.code})`;
});
document.addEventListener('keyup', (event) => {
output.textContent = `キーが離されました: ${event.key} (コード: ${event.code})`;
});const output = document.getElementById('output');
document.addEventListener('keydown', (event) => {
output.textContent = `キーが押されました: ${event.key} (コード: ${event.code})`;
});
document.addEventListener('keyup', (event) => {
output.textContent = `キーが離されました: ${event.key} (コード: ${event.code})`;
});<p>何かキーを押してみてください。</p>
<p id="output"></p>このコードでは、keydownとkeyupイベントをそれぞれ検知して、押されたキーと離されたキーの情報を表示しています。event.keyプロパティでキーの値を、event.codeプロパティでキーの物理的なコードを取得できます。
keydownイベントを使用すると、ショートカットキーを実装することができます。以下は、Ctrl+Sキーでメッセージを表示する例です。
See the Pen keydown() / keyup() by tones (@tonescodedesign) on CodePen.
document.addEventListener('keydown', (event) => {
if (event.ctrlKey && event.key === 's') {
event.preventDefault(); // ブラウザのデフォルト動作をキャンセル
alert('Ctrl+Sが押されました。保存機能はここで実行されます。');
}
});<p>Ctrl+Sを押してみてください。</p>このコードでは、Ctrlキーを押しながらSキーが押された場合にアラートを表示しています。event.ctrlKeyプロパティを使用してCtrlキーが押されているかを確認し、event.preventDefault()でブラウザのデフォルト動作（ページの保存）をキャンセルしています。
keyupイベントは、入力フィールドの値が変更されたタイミングで処理を実行したい場合に便利です。以下は、入力文字に応じて候補リストをリアルタイムで表示する例です。
See the Pen keydown() / keyup() by tones (@tonescodedesign) on CodePen.
const searchBox = document.getElementById('searchBox');
const suggestions = document.getElementById('suggestions');
const items = ['コーヒー', 'カフェラテ', 'エスプレッソ', 'カフェオレ', 'マッキャート'];
searchBox.addEventListener('keyup', () => {
const query = searchBox.value.toLowerCase();
suggestions.innerHTML = '';
const filteredItems = items.filter(item => item.toLowerCase().includes(query));
filteredItems.forEach(item => {
const li = document.createElement('li');
li.textContent = item;
suggestions.appendChild(li);
});
});<input type="text" id="searchBox" placeholder="検索語を入力してください">
<ul id="suggestions"></ul>このコードでは、ユーザーが入力フィールドに文字を入力するたびに、入力された文字列に一致する候補がリストに表示されます。
- keydown: キーが押された瞬間や長押しを検知したい場合に適しています。例: ショートカットキーの実装。
- keyup: キーが離された後の状態を検知したい場合に適しています。例: 入力後の値を処理するリアルタイム検索。
これらを使い分けることで、さまざまなニーズに対応したキーボードイベントの実装が可能になります。
JavaScriptのkeydownとkeyupイベントは、キーボード操作に基づいたインタラクティブな機能を実現するために非常に有用です。それぞれのイベントは用途が異なるため、適切
