Proporciona una experiencia envolvente en pantalla completa para una variedad de casos de uso, incluidos sitios web interactivos, juegos y transmisión remota de escritorio o aplicaciones.
Cada vez más usuarios pasan la mayor parte del tiempo en el navegador, por lo que los sitios web interactivos, los juegos, la transmisión de escritorio remoto y la transmisión de aplicaciones se esfuerzan por brindar una experiencia envolvente en pantalla completa. Para lograrlo, los sitios necesitan acceder 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 pueden ser necesarias 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 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, así como la obtención de información sobre la disposición del teclado del usuario.
Requisitos
En los navegadores actualizados, hay dos tipos de pantalla completa disponibles: la que se inicia con JavaScript a través de la API de pantalla completa 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 por JavaScript:
await document.documentElement.requestFullscreen();
Detección de atributos
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!
}
Bloqueo del 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 teclas a las que el sistema operativo subyacente les otorga acceso. El método lock() toma un array de uno o más códigos de teclas 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 tecla válidos disponible en la especificación UI Events KeyboardEvent code Values.
Capturando todas las teclas
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. Suponiendo que se use un diseño QWERTY de EE.UU., registrar "KeyW" garantiza que W, Mayúsculas + W, Control + W, Control + Mayúsculas + W y todas las demás combinaciones de teclas modificadoras 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 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 devuelve 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 Iniciar pantalla completa que aparece a continuación, se abrirá la demostración en una ventana nueva para que puedas verla en pantalla completa.
Consideraciones de seguridad
Una preocupación con esta API es que podría usarse para capturar todas las teclas y (junto con la API de pantalla completa 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 teclas. En Chrome, esta vía de escape es una presión prolongada (dos segundos) de la tecla Esc para activar una salida del bloqueo del teclado.
Vínculos útiles
- Borrador de la especificación
- Repositorio de GitHub
- Entrada de ChromeStatus
- Error de seguimiento de Chrome
- Códigos de teclas para teclados estándar
Agradecimientos
Este artículo fue revisado por Joe Medley y Kayce Basques. La especificación de Keyboard Lock fue creada por Gary Kacmarcik y Jamie Walch.