Usa la API de Keyboard Lock para capturar la tecla Escape en el modo de pantalla completa.
Si alguna vez usaste un juego web de pantalla completa en el que se mostró un diálogo del juego que cancelaste de forma instintiva con la tecla Escape, es probable que hayas salido del modo de pantalla completa. Esta experiencia frustrante se debe al hecho de que el diálogo y el modo de pantalla completa "combaten" por la tecla Escape. Es una batalla desigual porque, de forma predeterminada, siempre gana el modo de pantalla completa. Pero ¿cómo puedes hacer que el diálogo sea el ganador para la tecla Escape? Aquí es donde entra en juego la API de Keyboard Lock.
Navegadores compatibles
Cómo usar la API de Keyboard Lock
La API de Keyboard Lock 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 para cualquiera o todas las teclas del teclado físico. Este método solo puede capturar claves a las que el sistema operativo subyacente otorga acceso. Afortunadamente, la tecla Escape es una de ellas.
Si tu app tiene un modo de pantalla completa, usa la API de Keyboard Lock como mejora progresiva. Para ello, captura la tecla Escape cuando solicites el uso de pantalla completa. Desbloquear (es decir, dejar de capturar) el teclado cuando salgas del modo de pantalla completa mediante 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, cuando presiona Escape, se cancela el diálogo de forma predeterminada. Si el usuario mantiene presionada la tecla Escape, aún podrá salir del modo de pantalla completa. Lo mejor de ambos mundos.
Demostración
Puedes probar las variantes predeterminadas y las mejoradas 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 utilizar esta mejora progresiva en la práctica, simplemente copia el fragmento anterior. Se diseñó para funcionar sin cambios necesarios, incluso con el código existente de pantalla completa. Como ejemplo, consulta estas PR para el juego Freeciv. Una vez que se combine la PR, puedes presionar Escape para cancelar todos los diálogos del juego.
Un marcador adicional
No todas las apps o los juegos que admiten 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.