Contenidos
Bieten Sie ein umfassendes Vollbild-Erlebnis für eine Vielzahl von Anwendungsfällen, einschließlich interaktiver Websites, Spiele und Remotedesktop- oder Anwendungs-Streaming.
Da immer mehr Benutzer den größten Teil ihrer Zeit im Browser verbringen, bemühen sich hoch interaktive Websites, Spiele, Remotedesktop-Streaming und App-Streaming um ein umfassendes Vollbild-Erlebnis. Um dies zu erreichen, benötigen Websites im Vollbildmodus Zugriff auf spezielle Tasten und Tastaturkürzel, damit sie für Navigations-, Menü- oder Spielefunktionen verwendet werden können. Einige Beispiele für Schlüssel, die möglicherweise erforderlich sind, sind Esc, Alt + Zunge, Cmd + 'y Strg + Norden.
Standardmäßig stehen diese Schlüssel der Webanwendung nicht zur Verfügung, da sie vom zugrunde liegenden Browser oder Betriebssystem erfasst werden. Mit der Key Lock-API können Websites alle verfügbaren Schlüssel verwenden, die vom Host-Betriebssystem zugelassen werden (siehe Browserkompatibilität).
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
In modernen Browsern stehen zwei verschiedene Arten von Vollbild zur Verfügung: JavaScript-initiiert über das Vollbild-API und vom Benutzer über eine Tastenkombination gestartet. Die Keyboard Lock-API ist nur verfügbar, wenn JavaScript-initiierter Vollbildmodus Es ist aktiv. Hier ist ein Beispiel für einen von JavaScript initiierten Vollbildmodus:
Dokument abwarten . 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:
if ( 'Tastatur' im Navigator && 'Sperre' im Navigator . Tastatur ) {
}}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 . Tastatur . 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".
warte auf navigator . Tastatur . Schloss ( [
"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' , ( e ) => {
if ( ( e . code === 'KeyA' ) && ! ( event . ctrlKey || event . metaKey ) ) {
}}
} ) ;Tastatur entsperren
das Freischalten () Die Methode entsperrt alle vom sperren () Methode und gibt synchron zurück.
Navigator . Tastatur . entsperren ( ) ;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.
