JavaScript

This page shows how to use the JavaScript onKeyDown event to run code the moment a key is pressed, for example only when Enter is pressed or when the arrow keys are used.

onkeydown

キーボードのキーを押した瞬間に「Enterだけ処理する」「矢印キーで操作する」といった動きを JavaScript でつけたいときに使う onkeydown イベントの使いどころと基本パターンをまとめたページ。

onkeydown とは？

onkeydown（正式には keydown イベント／onkeydown プロパティ）は、キーボードのキーが押された瞬間に実行されるイベントハンドラです。キーボードからの入力を扱うときに、「Enterが押されたら送信」「矢印キーが押されたら動かす」といった反応を素早くつけることができます。

以下は、onkeydownの基本的な使い方です。

HTML

<input type="text" id="myInput">

JavaScript

// input要素の onkeydown プロパティにハンドラーを追加する
document.getElementById("myInput").onkeydown = function (event) {
	// 押されたキーの名前を取得する（例: "Enter", "a", "ArrowUp" など）
	const key = event.key;
	// コンソールに表示する
	console.log("Key: " + key);
};

Sample

Sampleを実行した時の画像

この例では、input要素でキーボード入力を受け付けるために、onkeydown プロパティに関数（イベントハンドラ）を設定しています。この関数はキーが押されるたびに呼び出され、引数として渡される event オブジェクトから event.key を使って「どのキーか」を文字列で取得し、コンソールに表示しています。

昔のサンプルコードでは event.keyCode で数字としてキーを調べる書き方もよく見かけますが、現在は event.key を使う書き方が推奨されています。

onkeydownは、ユーザーが入力したキーの種類に応じて、さまざまな処理を行うことができます。例えば、Enterキーが押されたときは、テキストボックスに入力されたテキストを検証して、フォームを送信する用にすることができます。また、矢印キーが押された時には、カーソルの位置を変更するなどの処理も行うことができます。

onkeydown 以外にも、JavaScript には keyup（キーを離したとき）などのキーボード関連のイベントがあります。昔は keypress もよく使われていましたが、現在は仕様上あまり推奨されていません。キー入力のタイミングで処理をしたい場合は、基本的には keydown を使う、と覚えておくとシンプルです。

キーを押しっぱなしにしたときの動き

keydown は、キーを押した瞬間だけでなく、キーを押しっぱなしにしているあいだも何度も発生します。ゲームでキャラクターを動かしたり、リストをぐりぐりスクロールさせるときには便利ですが、「1回だけ処理したい」のにキーを押しっぱなしにして暴走してしまうこともあります。

そんなときに役立つのが、event.repeat というプロパティです。これが true のときは「押しっぱなしによる2回目以降の keydown」だと判定できます。

JavaScript

const input = document.getElementById("myInput");

input.onkeydown = function (event) {
    // 押しっぱなしによる連続発火は無視する
    if (event.repeat) {
        return;
    }

    if (event.key === "ArrowRight") {
        // 右矢印キーが「押された瞬間」だけ 1 回だけ動かす
        console.log("右に 1 マス動かす");
    }
};

このように、event.repeat が true のときは早めに return してしまえば、「押した瞬間だけ 1 回だけ反応させる」という動きを作ることができます。

逆に「押しっぱなしでずっと動かしたい」ケースでは、あえて event.repeat を無視して、連続で発火することを前提に処理を書く、という考え方もあります。1 回だけにしたいのか、押しっぱなしで連続させたいのかを意識して、keydown と keyup を使い分けると、動きをイメージしやすくなります。

よくある質問

Enterキーが押されたときだけ処理したいときは？
event.key === "Enter" で判定します。

JavaScript

const input = document.getElementById("myInput");

input.onkeydown = function (event) {
    if (event.key === "Enter") {
        // Enterキーが押されたときの処理
        console.log("Enter が押されました");
    }
};
テキスト入力中（日本語入力中）にも反応してしまうのを避けたい
日本語入力中（IME変換中）は event.isComposing が true になるので、それを見て処理をスキップします。

JavaScript

input.onkeydown = function (event) {
    if (event.isComposing) {
        // 変換中は何もしない
        return;
    }
    // 通常のキー入力時の処理
};
入力欄ではなくページ全体でキー入力を拾いたい
document や window にリスナーをつけます。

JavaScript

document.addEventListener("keydown", function (event) {
    if (event.key === "Escape") {
        console.log("Esc キーが押されました");
    }
});
数字キーだけ／矢印キーだけを判定したい
event.key が "0"〜"9" か、"ArrowUp" などの文字列かどうかを if 文で分けて判定します。

よくあるエラー早見表

イベントが発火しない
入力欄にフォーカスが当たっていない、もしくは document.getElementById() の ID が間違っていることが多いです。
event が undefined になる
ハンドラの引数に event を書き忘れているか、古い書き方（window.event）と混ざっている可能性があります。
event.keyCode が常に 0 になる / 期待通りの値にならない
keyCode は現在非推奨で、ブラウザによって挙動が安定しないことがあります。代わりに event.key を使うようにします。
日本語入力中にも反応してしまう
IME変換中は event.isComposing を見て処理をスキップするのが基本です。
ショートカットキーが他のショートカットとぶつかる
Ctrl + C などの標準ショートカットは上書きしない方が無難です。どうしても上書きする場合は、ユーザー体験をよく考えて設計する必要があります。