Leg sleutels vast met de Keyboard Lock API

Bied een meeslepende, volledig scherm-ervaring voor uiteenlopende use cases, zoals interactieve websites, games en streaming van externe bureaubladen of applicaties.

Thomas Steiner

Nu steeds meer gebruikers het grootste deel van hun tijd in de browser doorbrengen, streven rijkelijk interactieve websites, games, streaming van externe bureaubladen en applicatiestreaming naar een meeslepende ervaring op volledig scherm. Om dit te bereiken, hebben websites toegang nodig tot speciale toetsen en sneltoetsen terwijl ze in de volledig schermmodus staan, zodat ze gebruikt kunnen worden voor navigatie, menu's of games. Enkele voorbeelden van de toetsen die hiervoor nodig kunnen zijn, zijn Esc , Alt + Tab , Cmd + ` en Ctrl + N.

Standaard zijn deze toetsen niet beschikbaar voor de webapplicatie, omdat ze worden vastgelegd door de browser of het onderliggende besturingssysteem. De Keyboard Lock API zorgt ervoor dat websites alle beschikbare toetsen kunnen gebruiken die door het hostbesturingssysteem worden toegestaan ​​(zie Browsercompatibiliteit ).

Ubuntu Linux wordt gestreamd naar een browsertabblad in macOS Chrome (nog niet in volledig scherm).
Het probleem: een gestreamd Ubuntu Linux-extern bureaublad draait niet in de volledig scherm-modus en heeft geen actieve toetsenbordvergrendeling, waardoor systeemtoetsen nog steeds worden vastgelegd door het macOS-hostbesturingssysteem en de ervaring nog niet meeslepend is.

De toetsenbordvergrendelings-API gebruiken

De Keyboard van de toetsenbord-API biedt functies waarmee u kunt schakelen tussen het vastleggen van toetsaanslagen op het fysieke toetsenbord en het verkrijgen van informatie over de toetsenbordindeling van de gebruiker.

Voorwaarde

Er zijn twee soorten volledig scherm beschikbaar in moderne browsers: JavaScript-geïnitieerd via de Fullscreen API en door de gebruiker geïnitieerd via een sneltoets. De Keyboard Lock API is alleen beschikbaar wanneer JavaScript-geïnitieerd volledig scherm actief is. Hier is een voorbeeld van JavaScript-geïnitieerd volledig scherm:

await document.documentElement.requestFullscreen();

Functiedetectie

U kunt het volgende patroon gebruiken om te controleren of de Keyboard Lock API wordt ondersteund:

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

Het toetsenbord vergrendelen

De lock() -methode van de Keyboard retourneert een belofte na het inschakelen van het vastleggen van toetsaanslagen voor een of alle toetsen op het fysieke toetsenbord. Deze methode kan alleen toetsen vastleggen die toegang hebben van het onderliggende besturingssysteem. De lock() -methode gebruikt een array met een of meer toetscodes om te vergrendelen. Als er geen toetscodes worden opgegeven, worden alle toetsen vergrendeld. Een lijst met geldige toetscodewaarden is beschikbaar in de UI Events KeyboardEvent code Values- specificatie.

Alle sleutels vastleggen

In het volgende voorbeeld worden alle toetsaanslagen vastgelegd.

navigator.keyboard.lock();

Het vastleggen van specifieke sleutels

In het volgende voorbeeld worden de toetsen W , A , S en D vastgelegd. Deze toetsen worden vastgelegd, ongeacht welke modifiers er bij het indrukken van de toets worden gebruikt. Uitgaande van een Amerikaanse QWERTY-indeling zorgt het registreren van "KeyW" ervoor dat W , Shift + W , Control + W , Control + Shift + W en alle andere toetscombinaties met een W naar de app worden verzonden. Hetzelfde geldt voor "KeyA" , "KeyS" en "KeyD" .

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

Je kunt reageren op vastgelegde toetsaanslagen met behulp van toetsenbordgebeurtenissen. Deze code gebruikt bijvoorbeeld de onkeydown -gebeurtenis:

document.addEventListener('keydown', (event) => {
  if ((event.code === 'KeyA') && !(event.ctrlKey || event.metaKey)) {
    // Do something when the 'A' key was pressed, but only
    // when not in combination with the command or control key.
  }
});

Het toetsenbord ontgrendelen

De unlock() methode ontgrendelt alle sleutels die zijn vastgelegd door de lock() methode en retourneert synchroon.

navigator.keyboard.unlock();

Wanneer een document wordt gesloten, roept de browser altijd impliciet unlock() aan.

Demonstratie

Je kunt de Keyboard Lock API testen door deze demo uit te voeren. Bekijk zeker de broncode . Klik op de onderstaande knop Volledig scherm openen om de demo in een nieuw venster te openen, zodat je in de volledig schermmodus kunt werken.

Beveiligingsoverwegingen

Een zorg met deze API is dat deze gebruikt kan worden om alle toetsen te grijpen en (in combinatie met de Fullscreen API en de PointerLock API ) te voorkomen dat de gebruiker de webpagina verlaat. Om dit te voorkomen, vereist de specificatie dat de browser een manier biedt om de toetsenbordvergrendeling te verlaten, zelfs als alle toetsen door de API worden opgevraagd. In Chrome is dit een nooduitgang door een lange (twee seconden durende) Esc -toets in te drukken om de toetsenbordvergrendeling te verlaten.

Dankbetuigingen

Dit artikel is beoordeeld door Joe Medley en Kayce Basques . De Keyboard Lock-specificatie is geschreven door Gary Kacmarcik en Jamie Walch . Hero-afbeelding door Ken Suarez op Unsplash .