JavaScript

【JavaScript】キーボード入力時にイベントを実行する(keyup,keydown)

こちらの記事では、キーボード入力時に実行される「keyup」「keydown」イベントについてサンプルコードを用いて分かりやすいよう解説しています。

JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

参考書が苦手な人はUdemyの動画がおすすめ
ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)

動画情報
作成者CodeMafia
学習時間19.5時間
受講者数28,547人
レビュー (5,025件)
動画の詳細はこちら

キーイベントの種類

JavaScriptのキーイベントは「keyup」「keydown」の2種類あります。

イベントごとの発火タイミングについては以下のとおりです。

イベント名発火タイミング
keyupキーを離した時
keydownキーを押下した時

keyupとkeydownのイベント発火のタイミングを見る限り、どちらを使っても問題ないと思われがちですが、keydownでは押しっぱなしで入力されたキー情報が取得できますが、keyupでは取得することができません。

下記にサンプルを用意したので、同じキーを押しっぱなしで入力してみてください。

サンプル

keyup:
keydown:

keydownで出力されたキー情報は次々に取得できているのに対し、keyupで出力されたキー情報は1つしか出力されないことが確認できます。

ユーザーが同じキーを押しっぱなしにするような動作をする場合は、keyupではなくkeydownを使うなど実装したい内容によってどちらのイベントを使うか選ぶ必要があります。

keypressイベントについて

keyupとkeydown以外にもkeypressイベントがありましたが、現在は非推奨のイベントになっています。

キーイベントの使い方

下記のキーイベントの使い方では、addEventListenerメソッドを使って紹介しています。
document.addEventListener('keyup', keyupEvent,false);     // 第一引数にkeyupを記述
document.addEventListener('keydown', keydownEvent,false); // 第一引数にkeydownを記述

function keyupEvent(){
  // keyupイベント実行時の処理を記述
}

function keydownEvent(){
  // keydownイベント実行時の処理を記述
}

キーイベントでよく使われるプロパティ

キーイベントでよく使われるプロパティ「key」「code」について解説します。

キーイベントを使ったことがある人は「keyCode」を使ったことがあるかもしれませんが、現在非推奨のプロパティになっています。

KeyboardEvent.key

KeyboardEvent.keyプロパティは、デバイスのキーボードに依存し「押されたキーが表す文字」を文字列として返します。

下記のサンプルコードでは、小文字のaまたは大文字のAが押されたときに特定の処理を実装する場合に使います。
document.addEventListener('keydown', keydownEvent,false); // ①

function keydownEvent(event){ // ②
  if(event.key === "a" || event.key === "A") { // ③
    // Aが押された時に実行したい処理を記述
  }
}
コード解説

  1. addEventListenerメソッドで、keydownイベント発火時にkeydownEvent関数が呼び出される設定
  2. keydownEvent関数を作成し、引数にeventを設定
  3. event.keyには押された文字が文字列として入っているので、条件分岐を使いaまたはAが押された時にのみ特定の処理を実行されるように記述

KeyboardEvent.code

KeyboardEvent.codeプロパティは、キーボードのどのキーが押されたかを返します。先ほど紹介したKeyboardEvent.keyは押されたキーが表す文字を文字列として返すため、小文字のaと大文字のAでは返ってくる値が違いましたよね。

しかしKeyboardEvent.codeプロパティは、小文字のaと大文字のAが押された時には全く同じの「KeyA」という文字列を返します。 下記のサンプルコードでは、KeyboardEvent.keyと同様に小文字のaまたは大文字のAが押されたときに特定の処理を実装する場合に使います。
document.addEventListener('keydown', keydownEvent,false);

function keydownEvent(event){
  if(event.code === "KeyA") { // ①
    // Aが押された時に実行したい処理を記述
  }
}
コード解説

  1. event.codeには押されたキーに対応する文字列が入っており、aまたはAを押した場合は「KeyA」の文字列が返ってくるため、条件分岐でKeyAの時だけ処理を実行するように記述

まとめ

今回はキーイベントのkeyup・keydownについて紹介しました。

下記の記事で、ShiftキーやCtrlキーと同時に押されたキー情報を取得する方法について解説しているので、興味のある方は下記の記事をご覧ください。

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村