JavaScript

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

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

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

本書情報
出版社技術評論社
著者山田 祥寛
発売日2023/2/13
ページ数624ページ
レビュー
(Amazon)
(4件)
先輩くん
先輩くん
10万部突破したJavaScriptの本が大幅増補改訂し7年ぶりに発売されたよ!
後輩ちゃん
後輩ちゃん
最新の基本文法から、開発に欠かせない応用トピックまで学ぶことが出来るよ!

綺麗なコードが書けるようになる!
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック

本書情報
出版社オライリージャパン
著者Dustin Boswell / Trevor Foucher
発売日2012/6/23
ページ数260ページ
レビュー
(Amazon)
(620件)
先輩くん
先輩くん
より良いコードを書きたい人におすすめの本だよ!
後輩ちゃん
後輩ちゃん
10以上前の書籍ですが、内容は今でも役に立つものばかりです!

キーイベントの種類

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アクセスランキング にほんブログ村