Proporciona una experiencia envolvente de pantalla completa para una variedad de casos de uso, como sitios web y juegos interactivos, y transmisión de aplicaciones o escritorio remoto.
Como cada vez más usuarios pasan la mayor parte de su tiempo en el navegador, los sitios web, los juegos, la transmisión de aplicaciones de escritorio remoto y la transmisión de aplicaciones altamente interactivas se esfuerzan por proporcionar una experiencia inmersiva de pantalla completa. Para lograrlo, los sitios necesitan acceso a teclas especiales y combinaciones de teclas mientras están en modo de pantalla completa para que puedan usarse en la navegación, los menús o los juegos. Algunos ejemplos de las teclas que podrían requerirse 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 teclas disponibles que permite el SO host (consulta Compatibilidad con navegadores).
Cómo usar la API de Keyboard Lock
La interfaz Keyboard de la API de Keyboard proporciona funciones que permiten activar o desactivar la captura de pulsaciones de teclas desde el teclado físico, así como obtener información sobre el diseño del teclado del usuario.
Requisitos
En los navegadores modernos, existen dos tipos de pantalla completa: la de JavaScript se inicia a través de la API de pantalla completa y la de usuario se inicia con 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!
}
Bloqueo del teclado
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 concede acceso. El método lock() toma un array de uno o más códigos de tecla para bloquear. Si no se proporcionan códigos de clave, se bloquearán todas las llaves. Hay una lista de valores de códigos de tecla válidos disponible en la especificación de Valores de código de 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 teclas W, A, S y D. Captura estas teclas independientemente de los modificadores que se usen cuando se presiona la tecla. Si suponemos que usas un diseño QWERTY de EE.UU., registrar "KeyW" garantizará que W, Mayúsculas + W, Control + W, Control + Mayúsculas + W y todas las demás combinaciones de modificadores de teclas 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 usar los eventos del teclado para responder a las pulsaciones de teclas que hayas capturado.
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 las muestra de forma síncrona.
navigator.keyboard.unlock();
Cuando se cierra un documento, el navegador siempre llama de manera implícita a unlock().
Demostración
Para probar la API de Keyboard Lock, ejecuta la demostración en Glitch. Asegúrate de consultar el código fuente. Cuando haces clic en el botón Enter de pantalla completa que aparece a continuación, se inicia la demostración en una ventana nueva para que pueda entrar en el modo de pantalla completa.
Consideraciones de seguridad
Una preocupación con esta API es que podría usarse para tomar todas las claves y (junto con la API de pantalla completa y la API de PointerLock) evitar que el usuario salga de la página web. Para evitarlo, la especificación requiere que el navegador brinde una forma para que el usuario salga del bloqueo del teclado, incluso si la API solicita todas las teclas. En Chrome, esta es la tecla de escape Esc prolongada (dos segundos) 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
Joe Medley y Kayce Basques revisaron este artículo. Gary Kacmarcik y Jamie Walch crearon la especificación de bloqueo de teclado. Hero image de Ken Suarez en Unsplash.