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

使用 Keyboard Lock API 以全螢幕模式擷取 Escape 鍵。

Thomas Steiner

如果您曾經玩過彈出遊戲內對話方塊，並利用 Escape 鍵不小心取消過全螢幕網頁遊戲，那麼您可能發現自己已退出全螢幕模式。這是因為對話方塊和全螢幕模式對 Escape 鍵「格鬥」。這是不平等的戰爭 因為根據預設，全螢幕模式一律會勝出但您可以如何讓對話方塊成為 Escape 鍵的勝出者？這時 Keyboard Lock API 就能派上用場。

瀏覽器支援

使用 Keyboard Lock API

Keyboard Lock API 適用於 navigator.keyboard.。Keyboard 介面的 lock() 方法會在啟用實體鍵盤上任一或所有按鍵的按鍵擷取功能後傳回承諾。這個方法只能擷取已由基礎作業系統授予存取權的金鑰。幸好 Escape 鍵是其中之一。

如果應用程式處於全螢幕模式，請在要求全螢幕模式時擷取 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.');
  });
}

這表示當使用者處於全螢幕模式時，按下 Escape 鍵即可取消預設對話方塊。即便使用者按下並按住 Escape 鍵，還是可以退出全螢幕模式。兩全其美。

操作示範

您可以在示範中同時測試預設值和逐步強化的變化版本。示範的原始碼比以上程式碼片段更為簡潔，因為需要同時顯示這兩個行為。

實務中

如要實際使用這項漸進式強化功能，只需複製上方的程式碼片段即可。此功能可在無須變更的情況下運作，即使現有的全螢幕程式碼也不例外。舉例來說，請參閱 Freeciv 遊戲的 PR 範例。合併 PR 後，只要按下 Escape 鍵即可取消所有遊戲內對話方塊。

額外書籤小程式

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