JavaScript でのキーの組み合わせの検出

JavaScript で 1 つのキーの押下をキャプチャするのは簡単な作業ですが、複数のキーの組み合わせを検出するとなると、少し複雑になる可能性があります。この投稿では、「Command」キーと、「C」（コピー）および「V」（ペースト）との組み合わせをキャプチャする簡単な実装を検討します。また、より複雑なキーの組み合わせを検出するためにこの機能を拡張する方法についても説明します。

基本的なセットアップ

これは、「Command」キーとその組み合わせをキャプチャする方法を示す簡単なコード スニペットです。

const keyState = {
  cmd: false,
};

// Add event listeners for keydown and keyup events
window.addEventListener("keydown", handleKeyDown);
window.addEventListener("keyup", handleKeyUp);

// Function to handle keydown events
function handleKeyDown(event) {
  if (event.key === "Meta") {
    keyState.cmd = true;
  }
  // Check for the Command and c combination
  if (keyState.cmd && event.key === "c") {
    console.log("user wants to copy");
  }
  // Check for the Command and v combination
  if (keyState.cmd && event.key === "v") {
    console.log("user wants to paste");
  }
}

// Function to handle keyup events
function handleKeyUp(event) {
  if (event.key === "Meta") {
    keyState.cmd = false;
  }
}

仕組み

1. キー状態の追跡: 「Command」キーが押されたかどうかを追跡するために、単純な keyState オブジェクトを維持します。
2. イベント リスナー: キーが押されたとき、または離されたときを検出するために、keydown イベントと keyup イベントのイベント リスナーを追加します。
3. 組み合わせ検出: handleKeyDown 関数では、別の特定のキー (「C」や「V」など) が押されている間に「Command」キーが押されているかどうかを確認します。

機能の拡張: より多くのキーの組み合わせを検出する

最初の実装は 2 つの組み合わせだけを検出するのにうまく機能しますが、より多くのキーや複雑な組み合わせを含めるように拡張することもできます。その方法は次のとおりです:

ステップ 1: Key State オブジェクトを展開する

keyState オブジェクトにさらにキーを追加できます。たとえば、Shift と Alt のサポートを追加してみましょう:

const keyState = {
  cmd: false,
  shift: false,
  alt: false,
};

ステップ 2: イベント ハンドラーを更新する

次の追加キーを追跡するようにイベント ハンドラーを変更します。

function handleKeyDown(event) {
  if (event.key === "Meta") {
    keyState.cmd = true;
  }
  if (event.key === "Shift") {
    keyState.shift = true;
  }
  if (event.key === "Alt") {
    keyState.alt = true;
  }

  // Example of detecting Command + Shift + C
  if (keyState.cmd && keyState.shift && event.key === "c") {
    console.log("user wants to copy with Shift");
  }

  // Example of detecting Command + Alt + V
  if (keyState.cmd && keyState.alt && event.key === "v") {
    console.log("user wants to paste with Alt");
  }
}

function handleKeyUp(event) {
  if (event.key === "Meta") {
    keyState.cmd = false;
  }
  if (event.key === "Shift") {
    keyState.shift = false;
  }
  if (event.key === "Alt") {
    keyState.alt = false;
  }
}

ステップ 3: 組み合わせをテストする

これで、次のようなさまざまな組み合わせをテストできるようになります。
コピー用のコマンド C
Command V 貼り付け用
Command Shift C で別のアクションを実行できます
Command Alt V で別のアクションを実行できます

結論

JavaScript で単一キーの押下を検出するのは簡単ですが、複数のキーを組み合わせる場合は、もう少し考えて実装する必要があります。キーの状態オブジェクトを維持することで、複数の組み合わせを効果的に追跡し、それに応じて応答できます。
上記のコードを自由に試してさらに拡張してください。他にどのような組み合わせを実装したいですか?以下のコメント欄でご意見を共有してください!

以上がJavaScript でのキーの組み合わせの検出の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。