• HOME > 
  • JavaScript > 
  • JSのkeyup・keydown・keypressの違い【キ...

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

投稿日:

このページには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の挙動と比較するとわかりやすいです)。

onkeyupの挙動

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

onkeyupでキーを押し続けたときの挙動

上の図は、下記のようなコードで処理が発火するたびにカウントするようにし、「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++;
});

keydown(onkeydown)

続いてはkeydownです。

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

下図を見てもらうとわかりやすいですが、keydownの場合は処理が発火するタイミングの違いにより、最後に入力したキー(ここでは「f」キー)が取得できていません。

onkeydownの挙動

またkeydownは、キーを押している間は処理が継続され続けるという特徴があります。

下図は先ほどと同じコードですが、キーを押し続けている間カウントが加算され続けていることがわかります。

onkeydownでキーを押し続けたときの挙動

keypress(onkeypress)

現在、keypressは非推奨になっているようです。突然ブラウザ側が非対応になる恐れもあるので使用は控えた方が良いかもしれません。

一応特徴を説明すると、keypressもkeydownと同じくキーが押されたタイミングで処理が発火します。keydownとの違いはkeypressはbackspaceキーなど文字キー以外で発火しないという点です。

onkeypressの挙動

まとめ

以上が、JavaScriptのkeyup・keydown・keypressの違いです。

微妙な違いで混同しやすいですが、処理の目的に応じて上手に使い分けていくことが必要ですね。

広告
広告

関連する記事

サムネイル

JSで入力値が英数字や半角かどうか即時文字チェックする【ma……

2024年10月02日
JavaScriptのmatch()は、正規表現を使って対象の文字列の中に一致するものがあるか検索できるメソッドです。このページではテキストボックスに入力された文字が数字や半角かどうかチェックする機能をmatchメソッドを使って実装する方法ついてご紹介します。
サムネイル

JSでHTMLのデータ属性を取得・更新する方法【datase……

2024年10月02日
JavaScriptのdatasetで要素のdata属性を操作する JavaScriptのdatasetは、HTML要素に設定されたデータ属性(data-*** […]
サムネイル

JavaScriptでラジオボタンの値(value)を取得す……

2024年10月02日
JSでラジオボタンの値を取得・操作する JavaScriptによるラジオボタンの操作(値の取得やチェックの切り替え)の方法を備忘録として残しておきます。 JSで […]
サムネイル

JSで大文字から小文字(小文字から大文字)へ変換する方法

2024年10月02日
JavaScriptで大文字と小文字を変換する JavaScriptを使った文字検索フォームを作るにあたり、大文字小文字どちらで入力されても良いよう、変換処理を […]
サムネイル

JSのclassList.toggleでクラスの付け外しを行……

2024年09月04日
classList.toggleとは? まず「classList」とは要素のクラス属性の情報を参照するプロパティで、「classList.add()」や「cla […]
サムネイル

JSで要素が特定のクラスを持つか調べる【classList.……

2024年09月04日
JSで要素が特定のクラスを持つか調べるには? JavaScriptで要素が特定のクラスを持つか調べるには「classList.contains」を使います。 「 […]
サムネイル

JSで文字列の中の任意の位置に別の文字を挿入する【slice……

2024年09月04日
JavaScriptに文字列の中の任意の位置に別の文字を挿入するにはslice()メソッドを利用します。sliceは特定の文字列の任意の位置から任意の文字数分を切り出すメソッドで、これを使って対象の文字列を一旦分解し、挿入したい文字と一緒新しい文字列としてくっつけ直します。