Mejor modo de pantalla completa con la API de Keyboard Lock

Usa la API de Keyboard Lock para capturar la tecla Escape en el modo de pantalla completa.

Thomas Steiner

Si alguna vez jugaste un juego web en pantalla completa que mostró un diálogo en el juego que cancelaste instintivamente con la tecla Escape, es probable que te hayas salido del modo de pantalla completa. Esta frustrante experiencia se debe a que el diálogo y el modo de pantalla completa "compiten" 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 para la tecla Escape? Aquí es donde entra en juego la API de Keyboard Lock.

Navegadores compatibles

Usa la API de Keyboard Lock

La API de Keyboard Lock está disponible en navigator.keyboard.. El método lock() de la interfaz Keyboard devuelve una promesa después de habilitar la captura de las pulsaciones de teclas para cualquiera o todas las teclas del teclado físico. Este método solo puede capturar las claves a las que el sistema operativo subyacente otorga acceso. Por suerte, la tecla Escape es una de ellas.

Si tu app tiene un modo de pantalla completa, usa la API de Keyboard Lock como una mejora progresiva. Para ello, captura la tecla Escape cuando solicites la pantalla completa. Desbloquea (es decir, ya no captura) el teclado cuando se sale 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 modo de pantalla completa, presionar Escape cancela el diálogo de forma predeterminada. Si el usuario mantiene presionada la tecla Escape, puede salir del modo de pantalla completa. Lo mejor de ambos mundos.

Demostración

Puedes probar las variantes predeterminadas y las mejoradas progresivamente en la demostración. El código fuente de la demostración es menos claro 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ñado para funcionar sin cambios obligatorios, incluso con código de pantalla completa existente. Como ejemplo, consulta esta solicitud de extracción para el juego Freeciv. Una vez que se combine la PR, puedes cancelar todos los diálogos del juego presionando Escape.

Un bookmarklet adicional

No todas las apps o juegos que admiten el modo de pantalla completa serán de código abierto o aceptarán tus parches. El siguiente bookmarklet se puede agregar a la barra de marcadores y hacer clic en él para habilitar un mejor modo de pantalla completa.