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

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

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

本書情報

出版社	技術評論社
著者	山田 祥寛
発売日	2023/2/13
ページ数	624ページ
レビュー (Amazon)	(4件)

先輩くん

10万部突破したJavaScriptの本が大幅増補改訂し7年ぶりに発売されたよ！

後輩ちゃん

最新の基本文法から、開発に欠かせない応用トピックまで学ぶことが出来るよ！

【送料無料】 改訂3版JavaScript本格入門 -モダンスタイルによる基礎から現場での応用まで / 山田祥寛 【本】

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

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

本書情報

出版社	オライリージャパン
著者	Dustin Boswell / Trevor Foucher
発売日	2012/6/23
ページ数	260ページ
レビュー (Amazon)	(620件)

先輩くん

より良いコードを書きたい人におすすめの本だよ！

後輩ちゃん

10以上前の書籍ですが、内容は今でも役に立つものばかりです！

【中古】リーダブルコード —より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)／Dustin Boswell、Trevor Foucher、須藤 功平、角 征典

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

キーイベントの種類

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

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

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

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

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

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

キーイベントの使い方

document.addEventListener('keyup', keyupEvent,false);     // 第一引数にkeyupを記述
document.addEventListener('keydown', keydownEvent,false); // 第一引数にkeydownを記述

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

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

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

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

KeyboardEvent.key

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

document.addEventListener('keydown', keydownEvent,false); // ①

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

KeyboardEvent.code

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

document.addEventListener('keydown', keydownEvent,false);

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

まとめ

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

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