Klavye Kilidi API'si ile Tuşları Yakalama

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

Thomas Steiner

Kullanıcıların çoğu zamanlarını tarayıcıda geçirdiği için zengin etkileşimli web siteleri, oyunlar, uzak masaüstü akışı ve uygulama akışı, etkileyici bir tam ekran deneyimi sunmaya çalışır. Bunu yapmak için sitelerin tam ekran modundayken özel tuşlara ve klavye kısayollarına erişmesi gerekir. Böylece bu tuşlar ve kısayollar gezinme, menüler veya oyunlar için kullanılabilir. Gerekli olabilecek tuşlara örnek olarak Esc, Alt + Tab, Cmd + ` ve Ctrl + N verilebilir.

Varsayılan olarak bu tuşlar, tarayıcı veya temel işletim sistemi tarafından yakalandığı için web uygulaması tarafından kullanılamaz. Keyboard Lock API, web sitelerinin ana makine işletim sistemi tarafından izin verilen tüm tuşları kullanmasına olanak tanır (Tarayıcı uyumluluğu bölümüne bakın).

macOS Chrome'da bir tarayıcı sekmesine aktarılan Ubuntu Linux (henüz tam ekran modunda çalışmıyor).
Sorun: Akışla aktarılan Ubuntu Linux uzak masaüstü, tam ekran modunda çalışmıyor ve etkin klavye kilidi yok. Bu nedenle, sistem tuşları macOS ana makine işletim sistemi tarafından yakalanmaya devam ediyor ve deneyim henüz tam ekran değil.

Keyboard Lock API'yi kullanma

Keyboard API'nin Keyboard arayüzü, fiziksel klavyeden tuş basma işlemlerini yakalamayı açıp kapatan ve kullanıcının klavye düzeni hakkında bilgi edinmeyi sağlayan işlevler sunar.

Ön koşul

Modern tarayıcılarda iki tür tam ekran modu vardır: Fullscreen API aracılığıyla JavaScript tarafından başlatılan ve klavye kısayolu aracılığıyla kullanıcı tarafından başlatılan. Keyboard Lock API yalnızca JavaScript tarafından başlatılan tam ekran etkin olduğunda kullanılabilir. JavaScript tarafından başlatılan tam ekran örneği:

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!
}

Klavye kilitleniyor

Keyboard arayüzünün lock() yöntemi, fiziksel klavyedeki tuşların herhangi biri veya tümü için tuş basışlarının yakalanmasını etkinleştirdikten sonra bir promise döndürür. Bu yöntem yalnızca temel işletim sistemi tarafından erişim izni verilen anahtarları yakalayabilir. lock() yöntemi, kilitlenecek bir veya daha fazla anahtar kodundan oluşan bir dizi alır. Anahtar kodu sağlanmazsa tüm anahtarlar kilitlenir. Geçerli tuş kodu değerlerinin listesi, UI Events KeyboardEvent code Values spesifikasyonunda bulunabilir.

Tüm tuşlar yakalanıyor

Aşağıdaki örnekte tüm tuş basma işlemleri yakalanı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 kullanıldığında "KeyW" tuşunun kaydedilmesi; W, Üst Karakter + W, Control + W, Control + Üst Karakter + W ve W ile diğer tüm değiştirici tuş kombinasyonlarının uygulamaya gönderilmesini sağlar. Aynı durum "KeyA", "KeyS" ve "KeyD" için de geçerlidir.

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

Klavye etkinliklerini kullanarak yakalanan tuş basmalarına yanıt verebilirsiniz. Örneğin, bu 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 kilidini açma

unlock() yöntemi, lock() yöntemi tarafından yakalanan tüm tuşların kilidini açar ve eşzamanlı olarak döndürür.

navigator.keyboard.unlock();

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

Demo

Bu demoyu çalıştırarak Klavye Kilidi API'sini test edebilirsiniz. Kaynak koduna göz atmayı unutmayın. Aşağıdaki "Tam ekrana geç" düğmesini tıkladığınızda demo yeni bir pencerede açılır ve tam ekran moduna geçebilir.

Güvenlikle İlgili Dikkat Edilmesi Gereken Noktalar

Bu API ile ilgili bir endişe, tüm tuşları almak için kullanılabilmesi ve (Fullscreen API ve PointerLock API ile birlikte) kullanıcının web sayfasından çıkmasını engelleyebilmesidir. Bunu önlemek için spesifikasyon, API tarafından tüm tuşlar istense bile tarayıcının kullanıcıya klavye kilidinden çıkmanın bir yolunu sunmasını gerektirir. Chrome'da bu çıkış yolu, Klavye Kilidi'nden çıkışı tetiklemek için Esc tuşuna uzun süre (iki saniye) basmaktır.

Onaylar

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.