JSのkeyup･keydown･keypressの違い【キー入力イベント】

投稿日:2024年06月13日

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

keyup･keydown･keypressとは？

JavaScriptの「keyup」「keypress」「keydown」はいずれもユーザーのキーボードイベントを処理したい時に使用します。

それぞれ処理が発火するタイミングなどに違いがあるので、用途に応じた使い分けが必要です。

keyup･keydown･keypressの使い方

イベントリスナーとして使用する場合は以下のように記述します。例では引数に「event」を指定しているので、「event.key」で押したキーが取得されます。

JavaScript

var res1 = document.getElementById("res1");
var test = document.getElementById('test');
test.addEventListener("keyup",function(event){
    res1.innerText = event.key;
});

HTMLのinput要素などに属性として記述する場合は以下のように、「onkeyup」（もしくはonkeydownやonkeypress）というように書きます。

HTML

<input type="text" onkeyup="currentData(event)">
<script>
function currentData(event){
    console.log(event.key);
}
</script>

続いては、keyup･keydown･keypressそれぞれの挙動の違いについて確認していきます。

keyup（onkeyup）

まずはkeyupです。

keyupはユーザーがキーボードのキーを押して離したタイミングで処理が発火します。

下図のように、入力したキーの情報を即時取得したいときに適しています（後述するkeydownの挙動と比較するとわかりやすいです）。

また、キーを離したタイミングで発火するので、キーを押し続けている間は処理が実行されません。

上の図は、下記のようなコードで処理が発火するたびにカウントするようにし、「a」と「backspace」を押し続けているのですが、keyupがキーを離したタイミングでしか発火しないので、それぞれのキーを離した2回のみカウントされています。

JavaScript

var res1 = document.getElementById("res1");
var res2 = document.getElementById("res2");
var test = document.getElementById('test');
var count = 1;
test.addEventListener("keyup",function(event){
    res1.innerText = event.key;
    res2.innerText = count;
    count++;
});