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

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

Thomas Steiner

如果您曾玩過全螢幕的網頁遊戲，而且遊戲中會彈出遊戲對話方塊，而您使用 Escape 鍵取消，那麼或許會發現自己退出全螢幕模式。 出現這類讓使用者感到困擾的現象，是因為對話方塊和全螢幕模式會「打架」Escape 鍵。根據預設，全螢幕一律會勝出，因此這場戰鬥是不平等的。但該如何讓對話方塊成為 Escape 鍵的勝出者？此時 Keyboard Lock API 就能派上用場。

瀏覽器支援

使用 Keyboard Lock API

navigator.keyboard. 支援 Keyboard Lock API。在啟用對實體鍵盤的任一或所有鍵按下按鍵後，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.');
  });
}

也就是說，當使用者處於全螢幕模式時，按 Esc 鍵會取消對話方塊。如果使用者按下並按住 Escape 鍵，仍可退出全螢幕模式。雙管齊下，

操作示範

您可以在試用版中測試預設和漸進式強化的變化版本。示範的原始碼比起先前的程式碼片段要保持簡潔，因為必須同時顯示這兩種行為。

實際應用

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

額外書籤小程式

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