この記事で分かること
onkeydown/onkeypress/onkeyupの違い- キー操作イベントが発生する正確なタイミング
- キーを押した瞬間・押している間・離した瞬間の処理方法
- 実務で役立つキーボードイベントの使い分け
- 実際に動作を確認できるサンプルコード
onkeydown・onkeypress・onkeyup は、
キーボードの操作に応じて発生するイベントです。
同じ要素に設定した場合、一般的に onkeydown → onkeypress → onkeyup の順に発生します。
ただし、ブラウザによって発生順序や挙動が異なる場合があります。
特に onkeypress は非推奨になりつつあり、文字入力系のキーでのみ発生するケースがあります。
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')">
→ キー操作の順序を確認するのに便利です。
JavaScript 初心者におすすめの学習書籍
書籍で学ぶのが向いている人
- 紙の本で体系的に学びたい
- ネット記事だけだと情報が断片的に感じる
- キー入力やイベント処理を基礎から理解したい
キー操作イベント（onkeydown / onkeypress / onkeyup）は、
入力補助・ショートカットキー・リアルタイム入力処理など、実務で頻繁に使われる重要な分野です。
書籍ではこれらを体系的に順序立てて学べるため、理解が深まりやすいです。
いちばんやさしい JavaScript の教本
写真や図が多く、手を動かしながら学べる初心者向けの入門書です。
イベント処理の基礎が丁寧に解説されており、キー入力イベントの理解にもつながります。
この本で解決できること：
- イベントの仕組みを視覚的に理解できる
- キー入力と UI の連動が分かる
- 実際に動くサンプルで学べるため挫折しにくい
確かな力が身につく JavaScript「超」入門
JavaScriptの基礎を体系的に学びたい方に向いている入門書です。
キーイベントの仕組みや、ショートカットキーの実装など、実務的なコード理解が深まります。
この本で解決できること：
- イベントの動作原理を体系的に理解できる
- 実務で使えるキー入力処理が書けるようになる
- 現代的な JavaScript の書き方が身につく
動画で理解を深めたい方へ（Udemy講座）
キー操作イベントは「押した瞬間」「押している間」「離した瞬間」の違いを理解することが重要です。
動画で実際の動きを確認できる Udemy は、こうしたイベントの理解に非常に向いています。
初心者のためのJavaScript 完全入門
関数・条件分岐・イベントなど、JavaScriptの基礎を体系的に学べる人気講座です。
キー入力イベントの基本も丁寧に扱われており、初心者でも理解しやすい内容です。
この講座で解決できること：
- キー操作イベントの動きを視覚的に理解できる
- 入力補助やショートカット処理の基礎が分かる
- 初心者がつまずきやすいポイントを丁寧に解説
→ 初心者のためのJavaScript 完全入門（Udemy）
超JavaScript 完全ガイド 2026
基礎から応用まで幅広く学べる講座で、キー入力を使った高度な UI 制御を学びたい方に最適です。
この講座で解決できること：
- 実務レベルのショートカットキー実装を理解できる
keydown／keyupを使ったリアルタイム入力処理が身につく- 現代的なイベント処理をまとめて習得
体系的に学びたい方へ（スクールという選択肢）
独学の限界を感じやすいポイント
- キーイベントの使い分けで混乱しやすい
- ショートカットキーの実装方法が分からない
- リアルタイム入力処理の設計が難しい
- コードレビューを受ける機会がない
スクールでは、プロの講師が学習ロードマップを作成し、
onkeydown／onkeypress／onkeyup を使った入力制御やショートカット実装など、
実務で必須のスキルを丁寧にサポートしてくれます。
無料相談で得られるメリット
- あなたのレベルに合わせた学習計画を作成
- 独学でつまずきやすい部分を事前に把握
- 学習方法の改善点をプロがアドバイス
- エンジニア転職を視野に入れたキャリア相談も可能
JavaScript を効率よく学びたい方には、未経験からエンジニアを目指せる
DMM WEBCAMP の学習コースも選択肢のひとつです。
キーボードイベントに関するよくある質問（FAQ）
onkeypress は今でも使うべき？
非推奨のため、基本的には keydown または keyup を使うのが推奨です。
キーの種類を判定したい場合は？
event.key や keyCode を使うと判定できます。
日本語入力（IME）ではどうなる？
IME 変換中は keydown / keyup の挙動が異なる場合があります。確定後の処理は keyup が安定です。
リアルタイム入力チェックに向いているのは？
keyup または input イベントが適しています。
まとめ
onkeydown：キーを押した瞬間に発生onkeypress：キーが押されている間に発生（文字入力系のみ・非推奨）onkeyup：キーを離した瞬間に発生- 入力補助・ショートカットキー・リアルタイム入力処理に便利
