JavaScriptのonkeydown・onkeypress・onkeyupとは？キー操作で発生するイベントを解説
onkeydown・onkeypress・onkeyup は、
キーボードの操作に応じて発生するイベントです。
同じ要素に設定した場合、一般的に onkeydown → onkeypress → onkeyup の順に発生します。
ただし、ブラウザによって発生順序や挙動が異なる場合があります。
onkeydownイベントとは？
onkeydown は、キーが押された瞬間に発生するイベントです。
最も早いタイミングでキー入力を検知できます。
使用例：キーが押されたらメッセージを表示
<body onkeydown=”alert(‘呼んだ？’)”>
→ キーを押した瞬間にダイアログが表示されます。
onkeypressイベントとは？
onkeypress は、キーが押されている間、断続的に発生するイベントです。
文字入力に関連するキーでのみ発生する場合があります。
使用例：キーが押されている間、関数を呼び出す
document.onkeypress = kpress;
→ キーを押し続けている間、kpress() が繰り返し実行されます。
onkeyupイベントとは？
onkeyup は、押されたキーが離されたときに発生するイベントです。
入力確定後の処理に向いています。
使用例：キーが離されたら処理を実行
<a href=”#” onkeyup=”kup()”>リンク</a>
→ キーを離した瞬間に kup() が実行されます。
3つのキーボードイベントの違い
| イベント | 発生タイミング |
|---|---|
| onkeydown | キーを押した瞬間 |
| onkeypress | キーが押されている間（文字入力系のみ） |
| onkeyup | キーを離した瞬間 |
→ 入力のタイミングに応じて使い分けることで、より細かい制御が可能になります。
実際のサンプル
<input type=”text” name=”keytest”
onkeydown=”console.log(‘keydown’)”
onkeypress=”console.log(‘keypress’)”
onkeyup=”console.log(‘keyup’)”>
onkeydown=”console.log(‘keydown’)”
onkeypress=”console.log(‘keypress’)”
onkeyup=”console.log(‘keyup’)”>
→ キー操作の順序を確認するのに便利です。
まとめ
onkeydown：キーを押した瞬間に発生onkeypress：キーが押されている間に発生（文字入力系）onkeyup：キーを離した瞬間に発生- 入力補助・ショートカットキー・リアルタイム入力処理に便利
