JavaScriptのキーイベントとは？keydown・keypress・keyupの違いと使い方を解説
キーイベントとは
キーイベント（Key Events）は、ユーザーがキーボードを操作したタイミングで発生するイベントです。JavaScriptでは、主に以下の3種類のキーイベントが用意されています。
| イベント | 説明 |
|---|---|
| onkeydown | ユーザーがキーを押し始めた（押している）瞬間に発生します。すべてのキーで検出可能です。 |
| onkeypress | ユーザーがキーを押したときに発生します。ただし、文字を生成しないキー（Shift、Ctrlなど）では発生しないため注意が必要です。 |
| onkeyup | ユーザーが押していたキーを離した瞬間に発生します。 |
それぞれのイベントは発生タイミングが異なるため、用途に応じて使い分けることが重要です。例えば、リアルタイムな入力チェックには keydown や input イベントが適しており、確定後の値を扱う場合は keyup が便利です。
キーイベントのサンプルコード
以下は、JavaScriptでキーイベントを検出して画面に表示するシンプルなデモコードです。
コード例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScriptのキーイベント</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 18px;
color: blueviolet;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScriptのキーイベント</h1>
<div class="result"></div>
<h3>キーを押す、または離すと、発生したイベントが表示されます</h3>
<script>
let resEle = document.querySelector(".result");
document.body.addEventListener("keydown", () => {
resEle.innerHTML = "keydownイベントが発生しました <br>";
});
document.body.addEventListener("keyup", () => {
resEle.innerHTML = "keyupイベントが発生しました";
});
document.body.addEventListener("keypress", () => {
resEle.innerHTML += "keypressイベントが発生しました";
});
</script>
</body>
</html>実行結果
ページを開いてキーを操作すると、発生したイベントに応じて表示内容が変化します。
キーを押し続けているとき：
キーを押した直後：
キーを離したとき：
まとめ
キーイベントを活用することで、ショートカット機能やフォームの入力バリデーションなど、インタラクティブなWebアプリケーションを実現できます。なお、keypress は現在非推奨（deprecated）となっているため、新規開発では keydown と keyup を使うことが推奨されます。
-
JavaScriptのスクロールイベントとは？基本の使い方をサンプルコードで解説
JavaScriptにおけるスクロールイベント（scroll event）は、ユーザーがスクロールバーを上下に操作したときに発生するイベントです。ページのスクロール位置に応じて処理を実行したい場合に活用される、非常に重要なイベントのひとつです。 スクロールイベントの基本的な仕組み スクロールイベントは、windowオブジェクトやスクロール可能な要素に対してaddEventListener()メソッドを使って登録できます。スクロールが行われるたびに、登録した関数が繰り返し呼び出される仕組みになっています。 以下は、JavaScriptでスクロールイベントを使用したサンプルコードです。 サンプルコ
-
JavaScriptでEnterキーの押下イベント（keypress）を検出する方法
Webアプリケーションでは、ユーザーがEnterキーを押したタイミングで特定の処理を実行したい場面がよくあります。例えば、検索フォームで入力後に自動で検索を実行したり、チャット画面でメッセージを送信したりするケースです。 JavaScriptでは、onkeypressイベントとEnterキーのキーコード「13」を組み合わせることで、簡単にEnterキーの押下を検出できます。 基本的な実装方法 まず、HTML側のinput要素にonkeypress属性を設定し、キーが押されたときに呼び出す関数を指定します。 onkeypress=yourFunctionName 次に、JavaScript側でイ