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

在全屏模式下，使用 键盘锁定 API 捕获 Esc 键。

Thomas Steiner

如果您曾在玩过全屏 Web 游戏时弹出游戏内对话框，而您又使用 Esc 键本能地取消该对话框，那么您很可能会发现自己退出了全屏模式。这种令人沮丧的体验是由于对话框和全屏模式针对 Esc 键“争夺”而造成的。这是一场不平等的战斗，因为在默认情况下，全屏模式始终胜出。但是，如何使对话框成为使用 Esc 键时的胜出者呢？这正是 keyboard Lock API 的用武之地。

浏览器支持

使用 键盘锁定 API

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

如果您的应用具有全屏模式，可以在请求全屏时捕获 Esc 键，使用 KEY 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 键，仍然可以退出全屏模式。两全其美。

演示

您可以在此演示中测试默认变体和渐进式增强变体。该演示的源代码不如之前的代码段简洁明了，因为它需要显示这两种行为。

实际应用

要在实际操作中使用此渐进式增强功能，只需复制上一个代码段即可。无需更改即可使用此 API，即使使用现有的全屏代码也是如此。例如，Freeciv 游戏的这个公共关系。合并 PR 后，您可以按 Esc 取消所有游戏内对话框。

额外赠送的小书签

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