Capture Keys with the Key Lock API

Con más y más usuarios que pasan la mayor parte de su tiempo en el browserUn navegador (además: browser) es una herramienta informática que te permite ver documentos y datos y navegar por la red. Los navegadores pueden mostrar distintos tipos de recursos de información; principalmente documentos HTML, a pesar de todo, además son posibles otros tipos de archivos y contenido multimedia, como PDF, JPEG, MPEG, GIF o el lenguaje de meta marcado. A través el uso de complementos especiales y la configuración respectivo, los plus, 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 APIConcepto de API¿Qué es una API?Una API, siglas de Application Programming Interface o Interfaz de Programación de Apps, es un recopilatorio de código que se puede emplear para que varias apps se comuniquen entre ellas. Es algo que realiza una tarea equivalente a la interfaz de usuario al momento de promover la interacción entre persona y programa, solo que aplicado única y exclusivamente dentro del entorno del software.Aún cuando suene plus 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 browsersConcepto de Navegadores¿Qué son los Navegadores?Los Navegadores son herramientas informáticas que utilizamos para, normalmente, navegar por Internet y visitar cualquier página web, al mismo tiempo de para hacer otras tareas como ver documentos, observar vídeos o reproducir contenido multimedia de cualquier tipo. Son un tipo de software sencillamente usual y bastante utilizado hoy en día.Insistimos en que es algo que se utiliza con mucha frecuencia, puesto que moverse por Internet plus modernos: iniciado por JavaScriptJavaScript es un lenguaje de programación que funciona en el lado del cliente y con el que las webs pueden ser más funcionales. Incorporación en código HTML El código JavaScript puede ser incrustado en las páginas HTML, para que adquieran funcionalidad. Existen varias opciones. Puede estar entre las etiquetas <SCRIPT> y </SCRIPT>, puede estar contenido en un archivo externo, puede ser un parámetro de las etiquetas HTML, y puede estar plus through the Full screen API and started by the user via a keyboard shortcut. The Keyboard Lock API is only available when 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 &ampConcepto de AMP¿Qué es el AMP o Accelerated Mobile Pages?El AMP, abreviatura de Accelerated Mobile Pages, es una propuesta que empezó a tomar forma en el año 2016 con la finalidad de mejorar la usabilidad, lectura y, en general, la experiencia de los usuarios de teléfono celular dentro de cualquier página web. Emprendida por Google con un aperturismo total (es de código abierto), lleva en activo desde entonces para facilitar plus;& '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 eventConcepto de Evento¿Qué es un Evento?Un Evento es una actividad de carácter social que suele tener cierta proyección a nivel público y, de esta manera, suscita el interés de un determinado sector relacionado con la temática o con la razón por el que se celebra. Es un tipo de acto que suele tener mucha repercusión a nivel empresarial.Podemos hallar distintos tipos de eventos, desde los deportivos hasta los empresariales, pasando plus:

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.