通过 Keyboard Lock API 提供更好的全屏模式

使用 Keyboard Lock API 在全屏模式下捕获 Escape 键。

Thomas Steiner

如果您曾玩过全屏网页游戏，并且游戏弹出了一个对话框，您本能地按 Escape 键取消了该对话框，那么您可能发现自己被踢出了全屏模式。 这种令人沮丧的体验是由对话框和全屏模式争夺 Escape 键造成的。这是一场不公平的战斗，因为默认情况下，全屏模式总是胜出。但如何才能使对话框成为 Escape 键的获胜者？这时，键盘锁定 API 就派上用场了。

浏览器支持

使用键盘锁定 API

键盘锁定 API 可在 navigator.keyboard. 上使用。Keyboard 接口的 lock() 方法在启用对实体键盘上任意或所有按键的按键捕获后返回一个 promise。此方法只能捕获底层操作系统授予访问权限的密钥。幸运的是，Escape 键就是其中之一。

如果您的应用具有全屏模式，请在请求全屏时捕获 Escape 键，以使用键盘锁定 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 取消所有游戏内对话框。

奖励小书签

并非所有支持全屏模式的应用或游戏都是开源的，或者接受您的补丁，您可以将以下书签小程序添加到书签栏，然后点击它以启用更好的全屏模式。