Proporcione una experiencia inmersiva a pantalla completa para una variedad de casos de uso, incluidos sitios la toile interactivos, juegos y escritorio remoto o transmisión de aplicaciones.
Con más y más usuarios que pasan la mayor parte de su tiempo en el le navigateur, 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 + Langue, Cmd + 'y Ctrl + Nord.
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).
Le problème: un bureau distant Ubuntu Linux en streaming non fonctionnant en mode plein écran et sans pour autant verrouillage du clavier actif, de sorte que les clés système sont toujours capturées par le système d'exploitation macOS hôte et que l'expérience est non immersif encore.
Utilisation de l'API Key Lock
Les Clavier Interface L'API du clavier fournit des fonctions qui permettent d'alterner la capture de frappes à partir du clavier physique, ainsi que d'obtenir des informations sur l'utilisation. Clavier.
Prérequis
Hay dos tipos diferentes de pantalla completa disponibles en los navigateurs modernos: iniciado por JavaScript à travers le API plein écran e iniciado por el Nom d'utilisateur a través de un atajo de teclado. La API Keyboard Lock solo está disponible cuando Plein écran lancé par JavaScript C'est actif. Voici un exemple de plein écran lancé par JavaScript:
attendre document.documentElement.requestFullscreen();Compatibilité du navigateur
Vous pouvez voir la compatibilité du navigateur sur je peux utiliser. Veuillez noter que toutes les clés système ne peuvent pas être verrouillées. Cela varie d'un système d'exploitation à l'autre. Par exemple, suivez crbug.com/855738 pour obtenir des mises à jour de progression sur le verrouillage du clavier système pour macOS.
Détection des fonctionnalités
Vous pouvez utiliser le modèle suivant pour vérifier si l'API Key Lock est prise en charge:
si ('keyboard' dans navigateur && 'lock' dans navigateur.keyboard) {
}Verrouiller le clavier
Les fermer à clé () méthode de Clavier L'interface renvoie une promesse après avoir activé la capture de touches pour une ou toutes les touches du clavier physique. Cette méthode ne peut capturer que les clés auxquelles le système d'exploitation sous-jacent accorde l'accès. Les fermer à clé () La méthode prend un tableau d'un ou plusieurs codes clés à bloquer. Si aucun code clé n'est fourni, toutes les clés seront verrouillées. Une liste des valeurs de code clé valides est disponible dans le Clavier d'événement de l'interface utilisateur Valeurs du code d'événement Spécifications.
Capture de toutes les clés
L'exemple suivant capture toutes les frappes.
navigateur.keyboard.lock();Capture de clés spécifiques
L'exemple suivant capture le W, ONGLE, Sy ré Clés. Capturez ces touches quels que soient les modificateurs utilisés avec la pression de touche. En supposant une disposition QWERTY américaine, inscrivez-vous "KeyW" s'assure que W, Changement + W, Contrôler + W, Contrôler + Changement + Wet toutes les autres combinaisons de touches de modification avec W sont envoyés à l'application. de même pour "KeyA", "Clés"y "KeyD".
attendre navigateur.keyboard.lock([
"KeyW",
"KeyA",
"Clés",
"KeyD",
]);Vous pouvez répondre aux frappes capturées à l'aide d'événements de clavier. Par exemple, ce code utilise le onkeydown un événement:
document.addEventListener('keydown', (et) => {
si ((et.code === 'KeyA') && !(un événement.ctrlKey || un événement.metaKey)) {
}
});Déverrouiller le clavier
Les déverrouiller () La méthode déverrouille toutes les clés capturées par le fermer à clé () méthode et retourne de manière synchrone.
navigateur.keyboard.unlock();Lorsqu'un document est fermé, le navigateur appelle toujours implicitement déverrouiller ().
Manifestation
Vous pouvez tester l'API Key Lock en exécutant le manifestation dans Glitch. Assurez-vous de regardez le code source. Cliquez sur le bouton Entrer en plein écran ci-dessous pour démarrer la démo dans une nouvelle fenêtre afin que vous puissiez entrer en mode plein écran.
Considérations relatives à la sécurité
Une préoccupation avec cette API est qu'elle pourrait être utilisée pour obtenir toutes les clés et (avec le API plein écran et le API PointerLock) empêcher l'utilisateur de quitter le site Web. Pour éviter cela, la spécification exige que le navigateur fournisse à l'utilisateur un moyen de sortir du verrouillage du clavier même si l'API demande toutes les clés. Sur Chrome, cette trappe d'évacuation est longue (deux secondes) Esc appuyez sur la touche pour activer une sortie de verrouillage du clavier.
Liens utiles
Merci
Cet article a été révisé par Joe medley y Kayce Basques. La spécification de verrouillage du clavier est créée par Gary Kacmarcik y Jamie Walch. Image de héros de Ken Suarez au Unsplash.
