Klavye Kilidi API'si ile Tuşları Yakalama

Etkileşimli web siteleri, oyunlar ve uzaktan masaüstü veya uygulama akışı gibi çeşitli kullanım alanları için etkileyici, tam ekran bir deneyim sunar.

Thomas Steiner

Gün geçtikçe daha fazla kullanıcı zamanlarının çoğunu tarayıcıda geçiriyor. Zengin etkileşimli web siteleri, oyunlar, uzaktan masaüstü yayını ve uygulama akışı özellikleri, yoğun bir tam ekran deneyimi sunmak için çabalıyor. Sitelerin tam ekran modundayken özel tuşlara ve klavye kısayollarına erişebilmesi ve böylece gezinme, menüler veya oyun için bunları kullanabilmesi gerekir. Gerekli olabilecek tuşlara örnek olarak Esc, Alt + Sekme, Cmd + ` ve Ctrl + N verilebilir.

Bu anahtarlar, tarayıcı veya kullanılan işletim sistemi tarafından yakalandığı için varsayılan olarak web uygulamasında kullanılamaz. Klavye Kilidi API'si, web sitelerinin ana makine işletim sistemi tarafından izin verilen tüm mevcut tuşları kullanmasını sağlar (Tarayıcı uyumluluğu sayfasına bakın).

Ubuntu Linux, macOS Chrome'da bir tarayıcı sekmesine akışla alındı (henüz tam ekran modunda çalışmıyor).
Sorun: tam ekran modunda çalışmayan ve etkin klavye kilidi olmayan akışlı bir Ubuntu Linux uzaktan masaüstü, Bu nedenle, sistem anahtarları macOS ana makine işletim sistemi tarafından yakalanmaya devam eder ve deneyim henüz kapsamlı değildir.

Klavye Kilidi API'sini kullanma

Klavye API'sinin Keyboard arayüzü, fiziksel klavyeden tuş basmalarının yakalanmasını açma/kapatma ve kullanıcının klavye düzeni hakkında bilgi almayı sağlayan işlevler sunar.

Ön koşul

Modern tarayıcılarda iki tür tam ekran seçeneği vardır: Tam Ekran API'si aracılığıyla JavaScript başlatılır ve bir klavye kısayolu ile kullanıcı tarafından başlatılır. Klavye Kilidi API'si yalnızca JavaScript tarafından başlatılan tam ekran etkinken kullanılabilir. JavaScript tarafından başlatılan tam ekran örneğini burada bulabilirsiniz:

await document.documentElement.requestFullscreen();

Özellik algılama

Klavye Kilidi API'sinin desteklenip desteklenmediğini kontrol etmek için aşağıdaki kalıbı kullanabilirsiniz:

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

Klavyeyi kilitleme

Keyboard arayüzünün lock() yöntemi, fiziksel klavyedeki tuşların herhangi biri veya tümü için tuşa basma işleminin gerçekleştirilmesinin ardından bir taahhüt döndürür. Bu yöntem yalnızca temel işletim sistemi tarafından erişim izni verilen anahtarları yakalayabilir. lock() yöntemi, kilitlemek için bir veya daha fazla anahtar kodundan oluşan bir dizi alır. Anahtar kodu sağlanmazsa tüm anahtarlar kilitlenir. Geçerli anahtar kodu değerlerinin bir listesi Kullanıcı Arayüzü Etkinlikleri Klavye Etkinliği kod Değerleri spesifikasyonunda mevcuttur.

Tüm anahtarlar yakalanıyor

Aşağıdaki örnekte tüm tuşlara basmalar yakalanmaktadır.

navigator.keyboard.lock();

Belirli tuşları yakalama

Aşağıdaki örnekte W, A, S ve D tuşları yakalanır. Tuşa basıldığında hangi değiştiricilerin kullanıldığına bakılmaksızın bu tuşları yakalar. ABD QWERTY düzeni olduğu varsayıldığında, "KeyW" kaydedildiğinde W, Üst Karakter + W, Control + W, Control + Üst Karakter + W ve W ile diğer tüm tuş değiştirici kombinasyonlarının uygulamaya gönderilmesi sağlanır. Aynı durum "KeyA", "KeyS" ve "KeyD" için de geçerlidir.

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

Klavye etkinliklerini kullanarak, yakalanan tuşlara basıldığında yanıt verebilirsiniz. Örneğin, şu kod onkeydown etkinliğini kullanır:

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.
  }
});

Klavyenin kilidi açılıyor

unlock() yöntemi, lock() yöntemi tarafından yakalanan tüm anahtarların kilidini açar ve eşzamanlı olarak geri döner.

navigator.keyboard.unlock();

Bir doküman kapatıldığında tarayıcı her zaman dolaylı olarak unlock() çağırır.

Demo

Glitch'te demo çalıştırarak Klavye Kilidi API'sini test edebilirsiniz. Kaynak kodu kontrol ettiğinizden emin olun. Aşağıdaki Tam ekrana geç düğmesi tıklandığında, tam ekran moduna geçebilmesi için demo yeni bir pencerede başlatılır.

Güvenlikle İlgili Dikkat Edilmesi Gereken Noktalar

Bu API'deki sorunlardan biri, tüm anahtarları almak için kullanılabilmesi ve (Fullscreen API ve PointerLock API'si ile birlikte) kullanıcının web sayfasından çıkmasının engellenmesidir. Bunu önlemek için spesifikasyon, tüm tuşlar API tarafından istense bile tarayıcının, kullanıcının klavye kilidinden çıkış yapması için bir yöntem sunmasını gerektirir. Chrome'da bu çıkış yolu, Klavye Kilidi'nden çıkışı tetiklemek için uzun (iki saniye) Esc tuşuna basmadır.

Teşekkür

Bu makale, Joe Medley ve Kayce Basques tarafından incelenmiştir. Klavye Kilidi spesifikasyonu Gary Kacmarcik ve Jamie Walch tarafından yazılmıştır. Ken Suarez'in Unsplash'teki hero resim.