こちらの記事では、キーボード入力時に実行される「keyup」「keydown」イベントについてサンプルコードを用いて分かりやすいよう解説しています。
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
変数名/関数名にもう悩まない！
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
ポチップ
キーイベントの種類
JavaScriptのキーイベントは「keyup」「keydown」の2種類あります。
イベントごとの発火タイミングについては以下のとおりです。
| イベント名 | 発火タイミング |
|---|---|
| keyup | キーを離した時 |
| keydown | キーを押下した時 |
keyupとkeydownのイベント発火のタイミングを見る限り、どちらを使っても問題ないと思われがちですが、keydownでは押しっぱなしで入力されたキー情報が取得できますが、keyupでは取得することができません。
下記にサンプルを用意したので、同じキーを押しっぱなしで入力してみてください。
keydownで出力されたキー情報は次々に取得できているのに対し、keyupで出力されたキー情報は1つしか出力されないことが確認できます。
ユーザーが同じキーを押しっぱなしにするような動作をする場合は、keyupではなくkeydownを使うなど実装したい内容によってどちらのイベントを使うか選ぶ必要があります。
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が押された時に実行したい処理を記述
}
}- addEventListenerメソッドで、keydownイベント発火時にkeydownEvent関数が呼び出される設定
- keydownEvent関数を作成し、引数にeventを設定
- 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が押された時に実行したい処理を記述
}
}- event.codeには押されたキーに対応する文字列が入っており、aまたはAを押した場合は「KeyA」の文字列が返ってくるため、条件分岐でKeyAの時だけ処理を実行するように記述
まとめ
今回はキーイベントのkeyup・keydownについて紹介しました。
下記の記事で、ShiftキーやCtrlキーと同時に押されたキー情報を取得する方法について解説しているので、興味のある方は下記の記事をご覧ください。
