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’)”>
→ キー操作の順序を確認するのに便利です。
初心者におすすめの学習書籍
JavaScriptの基礎を体系的に学びたい方には、こちらの書籍がとても分かりやすくおすすめです。
初心者がつまずきやすいポイントを丁寧に解説している入門書です。
→ 確かな力が身につくJavaScript「超」入門
まとめ
onkeydown：キーを押した瞬間に発生onkeypress：キーが押されている間に発生（文字入力系）onkeyup：キーを離した瞬間に発生- 入力補助・ショートカットキー・リアルタイム入力処理に便利
