Melhora no modo de tela cheia com a API Keyboard Lock

Use a API Keyboard Lock para capturar a tecla Esc no modo de tela cheia.

Thomas Steiner

Se você já jogou um jogo da Web em tela cheia que abriu uma caixa de diálogo no jogo e você cancelou instintivamente com a tecla Escape, provavelmente saiu do modo de tela cheia. Essa experiência frustrante é causada pelo fato de que o diálogo e o modo tela cheia "disputam" a tecla Escape. É uma batalha desigual porque, por padrão, o modo de tela cheia sempre vence. Mas como fazer com que a caixa de diálogo seja a vencedora para a tecla Escape? É aí que entra a API Keyboard Lock.

Suporte ao navegador

Usar a API Keyboard Lock

A API Keyboard Lock está disponível no navigator.keyboard.. O método lock() da interface Keyboard retorna uma promessa depois de ativar a captura de pressionamentos de tecla para qualquer ou todas as teclas do teclado físico. Esse método só pode capturar chaves que recebem acesso pelo sistema operacional subjacente. Felizmente, a tecla Escape é uma delas.

Se o app tiver um modo de tela cheia, use a API Keyboard Lock como um aprimoramento progressivo capturando a tecla Escape ao solicitar a tela cheia. Desbloqueie (ou seja, não capture mais) o teclado ao sair do modo de tela cheia usando o método unlock() da interface Keyboard.

// 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.');
  });
}

Isso significa que, quando o usuário está no modo de tela cheia, pressionar Escape cancela a caixa de diálogo por padrão. Se o usuário tocar e manter pressionada a tecla Escape, ainda será possível sair do modo de tela cheia. O melhor dos dois mundos.

Demonstração

Você pode testar as variantes padrão e com melhoria progressiva na demonstração. O código-fonte da demonstração é menos limpo do que o snippet anterior, porque precisa mostrar os dois comportamentos.

Na prática

Para usar esse aprimoramento progressivo na prática, basta copiar o snippet anterior. Ele foi projetado para funcionar sem mudanças necessárias, mesmo com código de tela cheia existente. Por exemplo, consulte este RP do jogo Freeciv. Depois que a solicitação de pull for mesclada, você poderá cancelar todas as caixas de diálogo no jogo pressionando Escape.

Um bookmarklet bônus

Nem todos os apps ou jogos que oferecem suporte ao modo de tela cheia são de código aberto ou aceitam seus patches. O bookmarklet a seguir pode ser adicionado à barra de favoritos e clicado para ativar um modo de tela cheia melhor.