Proporcione una experiencia inmersiva a pantalla completa para una variedad de casos de uso, incluidos sitios Netz 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 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 + Zunge, Cmd + 'y Strg + Norden.
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).
Das Problem: ein gestreamter Ubuntu Linux-Remotedesktop nein im Vollbildmodus laufen und ohne aktive Tastatursperre, so dass die Systemtasten weiterhin vom Host-MacOS-Betriebssystem erfasst werden und die Erfahrung ist nein noch eindringlich.
Verwenden der Key Lock-API
das Tastatur Schnittstelle Die Tastatur-API bietet Funktionen, mit denen Sie die Erfassung von Tastenanschlägen über die physische Tastatur umschalten und Informationen zur Verwendung abrufen können Tastaturbelegung.
Voraussetzung
Hay dos tipos diferentes de pantalla completa disponibles en los Browser modernos: iniciado por JavaScript durch das Vollbild-API e iniciado por el Nutzername a través de un atajo de teclado. La API Keyboard Lock solo está disponible cuando JavaScript-initiierter Vollbildmodus Es ist aktiv. Hier ist ein Beispiel für einen von JavaScript initiierten Vollbildmodus:
erwarten Dokument.documentElement.requestFullscreen();Browser-Kompatibilität
Sie können die Browserkompatibilität unter sehen ich kann nutzen. Bitte beachten Sie, dass nicht alle Systemschlüssel gesperrt werden können. Dies ist von Betriebssystem zu Betriebssystem unterschiedlich. Zum Beispiel folgen crbug.com/855738 um Fortschrittsaktualisierungen für die Systemtastatursperre für macOS zu erhalten.
Funktionserkennung
Mit dem folgenden Muster können Sie überprüfen, ob die Key Lock-API unterstützt wird:
wenn ('keyboard' im Navigator && 'lock' im Navigator.keyboard) {
}Sperren Sie die Tastatur
das sperren () Methode von Tastatur Die Benutzeroberfläche gibt ein Versprechen zurück, nachdem die Tastenanschlagerfassung für eine oder alle Tasten auf der physischen Tastatur aktiviert wurde. Diese Methode kann nur Schlüssel erfassen, auf die das zugrunde liegende Betriebssystem Zugriff gewährt. das sperren () Die Methode benötigt ein Array von einem oder mehreren Schlüsselcodes zum Blockieren. Wenn keine Schlüsselcodes angegeben sind, werden alle Schlüssel gesperrt. Eine Liste der gültigen Schlüsselcodewerte finden Sie in der UI-Ereignistastatur Ereigniscodewerte Spezifikationen.
Alle Schlüssel erfassen
Das folgende Beispiel erfasst alle Tastenanschläge.
Navigator.keyboard.lock();Erfassung bestimmter Schlüssel
Das folgende Beispiel zeigt die W., EIN, S.y Re Schlüssel. Erfassen Sie diese Tasten unabhängig von den beim Tastendruck verwendeten Modifikatoren. Unter der Annahme eines US-QWERTZ-Layouts registrieren Sie sich "KeyW" versichert dass W., Veränderung + W., Steuerung + W., Steuerung + Veränderung + W.und alle anderen Tastenmodifikatorkombinationen mit W. werden an die Anwendung gesendet. Gleiches gilt für "KeyA", "Schlüssel"y "KeyD".
erwarten Navigator.keyboard.lock([
"KeyW",
"KeyA",
"Schlüssel",
"KeyD",
]);Sie können auf erfasste Tastenanschläge mithilfe von Tastaturereignissen reagieren. In diesem Code wird beispielsweise das verwendet Onkeydown Veranstaltung:
Dokument.addEventListener('keydown', (und) => {
wenn ((und.code === 'KeyA') && !(Veranstaltung.ctrlKey || Veranstaltung.metaKey)) {
}
});Tastatur entsperren
das Freischalten () Die Methode entsperrt alle vom sperren () Methode und gibt synchron zurück.
Navigator.keyboard.unlock();Wenn ein Dokument geschlossen wird, ruft der Browser immer implizit auf Freischalten ().
Manifestation
Sie können die Key Lock-API testen, indem Sie die ausführen Manifestation in Glitch. Sicher sein zu Schauen Sie sich den Quellcode an. Durch Klicken auf die Schaltfläche Vollbild eingeben unten wird die Demo in einem neuen Fenster gestartet, sodass Sie in den Vollbildmodus wechseln können.
Sicherheitsüberlegungen
Ein Problem mit dieser API ist, dass sie verwendet werden kann, um alle Schlüssel und (zusammen mit der Vollbild-API und das PointerLock API) verhindern, dass der Benutzer die Website verlässt. Um dies zu vermeiden, muss der Browser gemäß der Spezifikation dem Benutzer eine Möglichkeit bieten, die Tastatursperre zu verlassen, selbst wenn die API alle Tasten anfordert. Auf Chrome ist diese Notluke lang (zwei Sekunden). Esc Drücken Sie die Taste, um einen Tastatursperrausgang zu aktivieren.
Nützliche Links
Vielen Dank
Dieser Artikel wurde von überprüft Joe Medley y Kayce Basques. Die Tastatursperrspezifikation wird erstellt von Gary Kacmarcik y Jamie Walch. Heldenbild von Ken Suarez im Unsplash.
