Brinda una experiencia envolvente de pantalla completa para una variedad de casos de uso, incluidos sitios web interactivos, juegos y transmisión de escritorio remoto o aplicaciones.
Dado que cada vez más usuarios pasan la mayor parte de su tiempo en el navegador, los sitios web interactivos enriquecidos, los juegos, la transmisión de escritorio remoto y la transmisión de aplicaciones se esfuerzan por brindar una experiencia envolvente de pantalla completa. Para lograr esto, los sitios necesitan acceso a teclas especiales y combinaciones de teclas mientras están en modo de pantalla completa, de modo que se puedan usar para la navegación, los menús o los juegos. Algunos ejemplos de las teclas que se pueden requerir son Esc, Alt + Tab, Cmd + ` y Ctrl + N.
De forma predeterminada, estas teclas no están disponibles para la aplicación web porque las captura el navegador o el sistema operativo subyacente. La API de Keyboard Lock permite que los sitios web usen todas las teclas disponibles que permite el SO host (consulta Compatibilidad con el navegador).
Cómo usar la API de Keyboard Lock
La interfaz Keyboard de la API de Keyboard proporciona funciones que activan o desactivan la captura de las pulsaciones de teclas del teclado físico, además de obtener información sobre la distribución del teclado del usuario.
Requisitos
En los navegadores modernos, hay dos tipos de pantalla completa disponibles: la que se inicia con JavaScript a través de la API de Fullscreen y la que inicia el usuario con una combinación de teclas. La API de Keyboard Lock solo está disponible cuando la pantalla completa iniciada por JavaScript está activa. Este es un ejemplo de pantalla completa iniciada con JavaScript:
await document.documentElement.requestFullscreen();
Detección de características
Puedes usar el siguiente patrón para verificar si se admite la API de Keyboard Lock:
if ('keyboard' in navigator && 'lock' in navigator.keyboard) {
// Supported!
}
Cómo bloquear el teclado
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. El método lock() toma un array de uno o más códigos de bloqueo. Si no se proporcionan códigos de llave, se bloquearán todas las llaves. En la especificación UI Events KeyboardEvent code Values, se encuentra disponible una lista de valores de código de tecla válidos.
Captura de todas las llaves
En el siguiente ejemplo, se capturan todas las pulsaciones de teclas.
navigator.keyboard.lock();
Cómo capturar teclas específicas
En el siguiente ejemplo, se capturan las teclas W, A, S y D. Captura estas teclas independientemente de los modificadores que se usen con la presión de la tecla. Si se supone un diseño QWERTY de EE.UU., registrar "KeyW" garantiza que se envíen a la app W, Mayúsculas + W, Control + W, Control + Mayúsculas + W y todas las demás combinaciones de teclas modificadoras con W. Lo mismo se aplica a "KeyA", "KeyS" y "KeyD".
await navigator.keyboard.lock([
"KeyW",
"KeyA",
"KeyS",
"KeyD",
]);
Puedes responder a las pulsaciones de teclas capturadas con eventos de teclado.
Por ejemplo, este código usa el evento onkeydown:
document.addEventListener('keydown', (event) => {
if ((event.code === 'KeyA') && !(event.ctrlKey || event.metaKey)) {
// Do something when the 'A' key was pressed, but only
// when not in combination with the command or control key.
}
});
Cómo desbloquear el teclado
El método unlock() desbloquea todas las claves capturadas por el método lock() y se muestra de forma síncrona.
navigator.keyboard.unlock();
Cuando se cierra un documento, el navegador siempre llama a unlock() de forma implícita.
Demostración
Puedes probar la API de Keyboard Lock ejecutando esta demostración. Asegúrate de consultar el código fuente. Si haces clic en el botón Enter full screen que se encuentra a continuación, se iniciará la demostración en una ventana nueva para que pueda ingresar al modo de pantalla completa.
Consideraciones de seguridad
Una preocupación con esta API es que se podría usar para tomar todas las teclas y (en conjunto con la API de Fullscreen y la API de PointerLock) impedir que el usuario salga de la página web. Para evitar esto, la especificación requiere que el navegador proporcione una forma para que el usuario salga del bloqueo del teclado, incluso si la API solicita todas las teclas. En Chrome, esta vía de escape consiste en mantener presionada la tecla Esc durante dos segundos para salir del bloqueo del teclado.
Vínculos útiles
- Borrador de especificaciones
- Repositorio de GitHub
- Entrada de ChromeStatus
- Error de seguimiento de Chrome
- Códigos de teclas para teclados estándar
Agradecimientos
Joe Medley y Kayce Basques revisaron este artículo. La especificación de Keyboard Lock fue escrita por Gary Kacmarcik y Jamie Walch. Imagen hero de Ken Suarez en Unsplash.