Proporciona una experiencia envolvente de pantalla completa para una variedad de casos de uso, incluidos sitios web interactivos, juegos y transmisión de aplicaciones o escritorios remotos.
Dado que cada vez más usuarios pasan la mayor parte del tiempo en el navegador, los sitios web, los juegos, la transmisión de aplicaciones y la transmisión de escritorios remotos interactivos y enriquecidos se esfuerzan por proporcionar una experiencia envolvente de pantalla completa. Para lograrlo, 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 claves que se pueden requerir son Esc, Alt + Tab, Cmd + ` y Ctrl + N.
De forma predeterminada, estas claves 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 claves disponibles que permite el SO host (consulta Compatibilidad con navegadores).
Usa 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
Existen dos tipos de pantalla completa disponibles en los navegadores modernos: la iniciada por JavaScript a través de la API de Fullscreen y la iniciada por el usuario a través de una combinación de teclas. La API de Keyboard Lock solo está disponible cuando está activa la pantalla completa iniciada por JavaScript. Este es un ejemplo de pantalla completa iniciada por JavaScript:
await document.documentElement.requestFullscreen();
Detección de funciones
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!
}
Bloquea el teclado
El método lock() de la interfaz Keyboard muestra 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 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 clave para bloquear. Si no se proporcionan códigos de clave, se bloquearán todas las claves. Hay una lista de valores de código de clave válidos disponible en la especificación de valores de código KeyboardEvent de eventos de la IU.
Captura todas las claves
En el siguiente ejemplo, se capturan todas las pulsaciones de teclas.
navigator.keyboard.lock();
Captura claves específicas
En el siguiente ejemplo, se capturan las claves W, A, S y D. Captura estas claves independientemente de los modificadores que se usen con la pulsación de teclas. Si se supone una distribución QWERTY de EE.UU., registrar "KeyW" garantiza que W, Shift + W, Control + W, Control + Shift + W y todas las demás combinaciones de modificadores de clave con W se envíen a la app. 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 onkeydown evento:
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.
}
});
Desbloquea 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 aparece a continuación, se inicia 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 claves y (junto con la API de Fullscreen y la API de PointerLock) evitar 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 claves. En Chrome, esta vía de escape es una pulsación larga (dos segundos) Esc de la tecla para activar una salida del bloqueo del teclado.
Vínculos útiles
- Borrador de especificación
- Repositorio de GitHub
- Entrada de ChromeStatus
- Error de seguimiento de Chrome
- Códigos de clave para teclados estándar
Agradecimientos
Este artículo fue revisado por Joe Medley y Kayce Basques. La especificación de Keyboard Lock es de Gary Kacmarcik y Jamie Walch.