Use a API Keyboard Lock para capturar a tecla Esc no modo de tela cheia.
Se você já jogou um jogo da Web em tela cheia em que uma caixa de diálogo apareceu e foi cancelada instintivamente com a tecla Escape, provavelmente se saiu do modo de tela cheia. Essa experiência frustrante é causada pelo fato de que a caixa de diálogo e o modo de tela cheia "competem" pela tecla Esc. É uma batalha desigual porque, por padrão, o modo de tela cheia sempre vence. Mas como tornar a caixa de diálogo a vencedora para a chave Esc? É aqui que a API Teclado Lock (link em inglês) entra em jogo.
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 teclas para qualquer ou todas as
teclas no teclado físico. Esse método só pode capturar chaves com 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 uma melhoria
progressiva capturando a tecla Esc 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 estiver no modo de tela cheia, pressionar Esc cancelará a caixa de diálogo por padrão. Se o usuário pressionar e manter a tecla Esc pressionada, ele ainda poderá sair do modo de tela cheia. O melhor dos dois mundos.
Demonstração
É possível testar as variantes padrão e as progressivamente aprimoradas na demonstração. O código-fonte da demonstração está menos limpo que o snippet anterior, porque ele precisa exibir 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 o código de tela cheia já existente. Como exemplo, consulte este PR do jogo Freeciv. Depois que o PR for mesclado, você poderá cancelar todas as caixas de diálogo no jogo pressionando Esc.
Um marcador de página bônus
Nem todos os apps ou jogos com suporte ao modo de tela cheia vão ter código aberto ou aceitar seus patches. É possível adicionar o bookmarklet a seguir à barra de favoritos e clicar para ativar o modo de tela cheia melhor.