KeyboardEventで取得できるキー情報

KeyboardEvent に含まれるキー情報

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

【キーに関するプロパティ】
KeyboardEvent オブジェクトではイベントが発生したときのキーの情報を参照するためのプロパティが用意されています。

・プロパティ
KeyboardEvent.code 押されたキー
KeyboardEvent.key 押されたキーが表す文字

KeyboardEvent.code はキーボードのどのキーが押されたのかを文字列で返します。それに対して KeyboardEvent.key は押されたキーが表す文字を文字列で返します。

a というキーを単に押したときと、 Shift + a を押した場合で結果をみてください。
code:KeyA, key:a
code:KeyA, key:A
KeyboardEvent.code プロパティはキーボードのどのキーが押されたのかを返すので Shift キーが一緒に押されているかどうかに関係なく KeyA という値を返します。
それに対して KeyboardEvent.key プロパティは押されたキーの値が表す文字を返すので Shift キーが一緒に押された場合は A ですが、押されていない場合は a となります。

サンプルコード

「sample1.css」
#memo{
    width:200px; 
  height:200px; 
  border:1px solid #000000; 
  }

「sample1.js」

#memo{

    width:200px;

    height:200px;

    border:1px solid #000000;

    }

 

ブラウザを立ち上げる

 a キーを押した場合

Shift + a キーを押した場合
keydown イベントは Shift キーが押された場合にも発生します。

【ShiftキーやAltキーを押したときのKeyboardEvent.codeの値】

keydown イベントや keyup イベントは

→Shift キーや Alt キーが押されたときにもイベントが発生します。

これらのキーはキーボードによっては左右にそれぞれ配置されていることがありますが、左右どちらのキーを押したかによって KeyboardEvent.code プロパティの値が異なることがあります。

Shift キーの右側のキーについては KeyboardEvent.code プロパティの値が空でしたが、それ以外のキーについては左右のどちらのキーを押したのかによって KeyboardEvent.code プロパティの値が異なりました。なお KeyboardEvent.key プロパティの値は左右どちらのキーを押した場合でも同じ値となります

【ShiftキーやAltキーが押されているかどうか】
キーを押した時に、 Shift キーや Alt キーが一緒に押されているかどうかを判別したい場合は

→KeyboardEvent オブジェクトの専用のプロパティを参照すると便利です

サンプルコード

「sample2.js」

function keyDown(event){

    if (event.code == 'KeyC' && event.ctrlKey) {

        console.log('Ctrl + c');

    }

    if (event.code == 'KeyC' && event.shiftKey) {

        console.log('Shift + c');

    }

}

document.addEventListener('keydown', keyDown);

 

ブラウザを立ち上げ、 document オブジェクトに対して addEventListener メソッドを使って keydown イベントに対するイベントリスナーを登録しています。 Ctrl + c キー、または Shift + c キーを押した場合だけコンソールに出力します。

【キーを押したままにしているかどうか】
キーを押したままにしている場合、 keydown イベントが連続して発生します。下記は a キーをしばらく押したままにしたあとキーを離した場合です。 keydown イベントが 99 回連続して発生しています。

・KeyboardEvent.repeat キーが連続して押されている場合は true

サンプルコード

「sample3.js」

function keyDown(event){

    if (!event.repeat){

        console.log('KeyDown code:' + event.code);

    }

}

function keyUp(){

    console.log('KeyUp');

}

let textarea = document.getElementById('memo');

textarea.addEventListener('keydown', keyDown);

textarea.addEventListener('keyup', keyUp);

 

ブラウザを立ち上げて、textarea 要素にフォーカスがある状態でキーを押しっぱなしにした場合、最初に押された時以外は keydown イベントを無視しています。