使用 Keyboard Lock API 改善全螢幕模式

在全螢幕模式下，使用 Keyboard Lock API 擷取 Escape 鍵。

Thomas Steiner

如果您曾玩過全螢幕網頁遊戲，且遊戲彈出對話方塊時，您本能地按下 Esc 鍵取消，可能就會發現自己退出全螢幕模式。造成這種令人沮喪體驗的原因是，對話方塊和全螢幕模式會「爭奪」Escape 鍵。這場戰役並不公平，因為全螢幕模式預設一律勝出。但如何讓對話方塊成為 Escape 鍵的贏家？這時就輪到 Keyboard Lock API 上場了。

瀏覽器支援

使用鍵盤鎖定 API

鍵盤鎖定 API 可在 navigator.keyboard. 上使用。Keyboard 介面的 lock() 方法會在啟用實體鍵盤上任何或所有按鍵的按鍵事件擷取功能後，傳回 Promise。這個方法只能擷取基礎作業系統授予存取權的金鑰。幸好 Esc 鍵就是其中之一。

如果應用程式有全螢幕模式，請在要求全螢幕時擷取 Escape 鍵，並使用 Keyboard Lock API 做為漸進式強化功能。使用 Keyboard 介面的 unlock() 方法離開全螢幕模式時，解鎖 (即不再擷取) 鍵盤。

// Feature detection.
const supportsKeyboardLock =
    ('keyboard' in navigator) && ('lock' in navigator.keyboard);

if (supportsKeyboardLock) {
  document.addEventListener('fullscreenchange', async () => {
    if (document.fullscreenElement) {
      // The magic happens here… 🦄
      await navigator.keyboard.lock(['Escape']);
      console.log('Keyboard locked.');
      return;
    }
    navigator.keyboard.unlock();
    console.log('Keyboard unlocked.');
  });
}

也就是說，使用者處於全螢幕模式時，按下 Esc 鍵會預設取消對話方塊。使用者按住 Esc 鍵，仍可結束全螢幕模式。兩全其美。

示範

您可以在示範中測試預設和逐步強化變體。由於需要顯示兩種行為，因此示範的原始碼不如先前的程式碼片段簡潔。

實際應用

如要在實際情況中使用這項漸進式強化功能，只要複製先前的程式碼片段即可。即使是現有的全螢幕程式碼，也不需要進行任何變更，即可搭配使用。如需範例，請參閱遊戲「Freeciv」的PR。PR 合併後，按下 Escape 即可取消所有遊戲內對話方塊。

額外書籤小程式

並非所有支援全螢幕模式的應用程式或遊戲都會開放原始碼或接受修補程式，您可以將下列書籤小程式新增至書籤列，然後按一下即可啟用更完善的全螢幕模式。