Capture Keys with the Key Lock API

Proporcione una experiencia inmersiva a pantalla completa para una variedad de casos de uso, incluidos sitios Web interactivos, juegos y escritorio remoto o transmisión de aplicaciones.

July 28, 2020

Con más y más usuarios que pasan la mayor parte de su tiempo en el browser, sitios web, juegos, transmisión de escritorio remoto y transmisión de aplicaciones muy interactivos se esfuerzan por brindar una experiencia de pantalla completa inmersiva. Para lograr esto, los sitios necesitan acceso a teclas especiales y atajos de teclado mientras están en modo de pantalla completa, para que puedan usarse para navegación, menús o funciones de juego. Algunos ejemplos de las claves que pueden ser necesarias son Esc, Alt + Tongue, Cmd + 'and Ctrl + North.

De forma predeterminada, estas claves no están disponibles para la aplicación web porque son capturadas por el navegador o el sistema operativo subyacente. La API de bloqueo de teclado permite que los sitios web utilicen todas las teclas disponibles permitidas por el sistema operativo host (consulte Compatibilidad del navegador).

Using the Key Lock API

the Keyboard Interface The Keyboard API provides functions that toggle capturing keystrokes from the physical keyboard, as well as obtaining information about usage Keyboard layout.

Prerequisite

Hay dos tipos diferentes de pantalla completa disponibles en los browsers modernos: iniciado por JavaScript through the Full screen API e iniciado por el Username a través de un atajo de teclado. La API Keyboard Lock solo está disponible cuando JavaScript-initiated full screen It is active. Here's an example of a JavaScript-initiated full screen:

await document.documentElement.requestFullscreen();

Browser compatibility

You can see browser compatibility at I can use. Please note that not all system keys can be locked. This varies from one operating system to another. For example, follow crbug.com/855738 to get progress updates on the system keyboard lock for macOS.

Feature detection

You can use the following pattern to check if the Key Lock API is supported:

if ('keyboard' in navigator && 'lock' in navigator.keyboard) {
}

Lock the keyboard

the lock () method of Keyboard The interface returns a promise after enabling keystroke capture for any or all keys on the physical keyboard. This method can only capture keys that the underlying operating system grants access to. the lock () The method takes an array of one or more key codes to block. If no key codes are provided, all keys will be locked. A list of valid key code values is available in the UI event keyboard Event code values Specifications.

Capturing all keys

The following example captures all keystrokes.

navigator.keyboard.lock();

Capture of specific keys

The following example captures the W, A, Sand re keys. Capture these keys regardless of the modifiers used with the key press. Assuming a US QWERTY layout, Register "KeyW" ensures that W, Change + W, Control + W, Control + Change + Wand all other key modifier combinations with W are sent to the application. The same applies to "KeyA", "Keys"and "KeyD".

await navigator.keyboard.lock([
"KeyW",
"KeyA",
"Keys",
"KeyD",
]);

You can respond to captured keystrokes using keyboard events. For example, this code uses the onkeydown event:

document.addEventListener('keydown', (and) => {
if ((and.code === 'KeyA') && !(event.ctrlKey || event.metaKey)) {
}
});

Unlocking the keyboard

the unlock () The method unlocks all keys captured by the lock () method and returns synchronously.

navigator.keyboard.unlock();

When a document is closed, the browser always calls implicitly unlock ().

Manifestation

You can test the Key Lock API by running the manifestation in Glitch. Be sure to look at the source code. Clicking the Enter Full Screen button below starts the demo in a new window so you can enter full screen mode.

Security Considerations

One concern with this API is that it could be used to get all the keys and (along with the Full screen API and the PointerLock API) prevent the user from leaving the website. To avoid this, the specification requires the browser to provide a way for the user to get out of the keyboard lock even if the API requests all keys. On Chrome this escape hatch is a long (two seconds) Esc press the key to activate a keypad lock output.

Helpful Links

Thanks

This article was reviewed by Joe medley and Kayce Basques. The keypad lock specification is created by Gary Kacmarcik and Jamie walch. Hero image of Ken Suarez in Unsplash.