檢測 JavaScript 中的組合鍵

在 JavaScript 中捕獲單個按鍵是一項簡單的任務，但是當涉及到檢測多個按鍵組合時，事情可能會變得有點棘手。在這篇文章中，我們將探索一個簡單的實現，它捕捉「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. 按鍵狀態追蹤：我們維護一個簡單的 keyState 物件來追蹤「Command」鍵是否被按下。
2. 事件監聽器：我們為 keydown 和 keyup 事件新增事件監聽器，以偵測何時按下或釋放按鍵。
3. 組合偵測：在handleKeyDown函數中，我們檢查是否在按下「Command」鍵的同時按下了另一個特定按鍵（如「C」或「V」）。

擴充功能：偵測更多按鍵組合

雖然我們最初的實作可以很好地檢測兩個組合，但您可能希望將其擴展以包含更多鍵甚至複雜的組合。具體方法如下：

第 1 步：展開關鍵狀態對象

您可以為 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 用來複製
指令 V 用來貼上
指令 Shift C 執行不同的操作
指令 Alt V 執行另一個動作

結論

在 JavaScript 中偵測單一按鍵很容易，但是當您開始組合多個按鍵時，它需要更多的思考和實現。透過維護按鍵的狀態對象，您可以有效地追蹤多個組合併做出相應的回應。
請隨意嘗試上面的程式碼並進一步擴展它！您還想實施哪些其他組合？在下面的評論中分享你的想法！

以上是檢測 JavaScript 中的組合鍵的詳細內容。更多資訊請關注PHP中文網其他相關文章！