Usa la API de bloqueo del teclado para capturar la tecla Escape en el modo de pantalla completa.
Si alguna vez jugaste un juego web de pantalla completa que apareció un diálogo dentro del juego que cancelaste instintivamente con la tecla Escape, es probable que hayas salido del modo de pantalla completa. Esta experiencia frustrante se debe al hecho de que los diálogos y el modo de pantalla completa "competan" por la tecla Escape. Es una batalla desigual porque, de forma predeterminada, el modo de pantalla completa siempre gana. Pero ¿cómo puedes hacer que el diálogo sea el ganador de la tecla Escape? Aquí es donde entra en juego la API de Teclado Lock.
Navegadores compatibles
Cómo usar la API de Teclado Lock
La API de Teclado de bloqueo está disponible en navigator.keyboard.. El método lock() de la interfaz Keyboard muestra una promesa después de habilitar la captura de pulsaciones de teclas en cualquiera o todas las teclas del teclado físico. Este método solo puede capturar claves a las que el sistema operativo subyacente les otorga acceso. Afortunadamente, la tecla Escape es uno de ellos.
Si tu app tiene un modo de pantalla completa, usa la API de bloqueo del teclado como mejora progresiva. Para ello, captura la tecla Escape cuando solicites la pantalla completa. Desbloquea (es decir, ya no capturas) el teclado cuando sales del modo de pantalla completa con el método unlock() de la interfaz 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.');
});
}
Esto significa que, cuando el usuario está en el modo de pantalla completa, presionar Escape cancela el diálogo de forma predeterminada. Aunque el usuario mantenga presionada la tecla Escape y mantiene presionada, podrá salir del modo de pantalla completa. Lo mejor de ambos mundos.
Demostración
Puedes probar las variantes predeterminadas y las que se mejoran de forma progresiva en la demostración. El código fuente de la demostración es menos limpio que el fragmento anterior, ya que debe mostrar ambos comportamientos.
En la práctica
Para usar esta mejora progresiva en la práctica, solo copia el fragmento anterior. Está diseñada para funcionar sin cambios necesarios, incluso con código de pantalla completa existente. Como ejemplo, consulta este PR para el juego Freeciv. Una vez que se combine el PR, podrás presionar Escape para cancelar todos los diálogos del juego.
Un favorito de otros usuarios
No todas las apps o juegos compatibles con el modo de pantalla completa serán de código abierto ni aceptarán tus parches. Puedes agregar el siguiente bookmarklet a tu barra de favoritos y hacer clic en él para habilitar un mejor modo de pantalla completa.