JavaScript でキーボード入力イベントを検出する

イベントリスナーは、特定のユーザー入力イベントが発生したときにトリガーされる JavaScript 関数です。このようなイベントの簡単な例は、マウスクリックまたはキーボードボタンの押下です。イベントリスナー関数は、最初にターゲットに登録する必要があります。その後、関心のある特定のイベントが発生するたびに、リスナー関数がトリガーされます。同じまたは異なるイベントタイプをリッスンできる同じターゲットに複数のリスナーを接続できます。

今日の記事は、JavaScript でキーボード入力イベントを認識する方法を示しています。

JavaScript で addEventListener() を使用してキーボード入力イベントを検出する

これは、イベントリスナーを登録する JavaScript によって提供される組み込みメソッドです。これは、EventTarget インターフェースのメソッドです。指定されたイベントがターゲットで検出されるたびに、構成されている関数が呼び出されます。

構文

target.addEventListener($type, $listener);
target.addEventListener($type, $listener, $options);
target.addEventListener($type, $listener, $useCapture);

パラメータ

• $type：これは、リッスンするイベントのタイプを指定する文字列のみを受け入れる必須パラメーターです。大文字と小文字が区別され、mouse、keyboard、input、database などのさまざまなイベントをサポートします。
• $listener：これは必須パラメーターであり、指定されたタイプのイベントが発生したときに通知を受け取るオブジェクトです。このオブジェクトは、EventListener インターフェースまたは JavaScript 関数を実装している必要があります。
• $options：イベントリスナーの特性を指定するオプションのパラメーターです。いくつかの特徴は、capture、once、passive、signal などがある。
• $useCapture：このタイプのイベントが DOM ツリーの下の EventTarget に送信される前に、登録されたリスナーに送信されるかどうかを示すブール値を受け入れるオプションのパラメーターです。

keydown、keypress、および keyup を聞くことができるキーボードイベントには 3つのタイプがあります。ブラウザは、キーボードのキーが押されたときに keydown イベントを発生させ、キーボードのキーを離すと、keyup イベントを発生させます。各キーボードイベントには、独自の keyCode または key があります。たとえば、Enter ボタンにはキーEnter と keyCode 13 があります。

コード例：

<input type="text" id="textId">

document.getElementById('textId').addEventListener('keydown', myFunction);

function myFunction() {
  switch (event.key) {
    case 'ArrowDown':
      console.log('ArrowDown');
      break;
    case 'ArrowUp':
      console.log('ArrowUp');
      break;
    case 'ArrowLeft':
      console.log('ArrowLeft');
      break;
    case 'ArrowRight':
      console.log('ArrowRight');
      break;
    default:
      console.log(event.key, event.keyCode);
      return;
  }

  event.preventDefault();
}

出力：