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 deneyimi sağlayın.

Thomas Steiner

Zamanlarının çoğunu tarayıcıda geçiren kullanıcıların sayısı gittikçe arttığından, zengin etkileşimli web siteleri, oyunlar, uzaktan masaüstü akışı ve uygulama akışı, etkileyici ve tam ekran bir deneyim sunmaya çalışmaktadır. Bunu yapabilmek için sitelerin tam ekran modundayken özel tuşlara ve klavye kısayollarına erişmesi gerekir. Böylece bu tuşlar gezinme, menü veya oyun amacıyla kullanılabilir. Gerekli olabilecek tuşlara örnek olarak Esc, Alt + Sekme, Cmd + ` ve Ctrl + N verilebilir.

Bu anahtarlar, tarayıcı veya temel işletim sistemi tarafından yakalandıkları için varsayılan olarak web uygulamasında kullanılamaz. Klavye Kilidi API'si web sitelerinin, ana makine işletim sisteminin izin verdiği tüm mevcut anahtarları kullanmasına olanak tanır (Tarayıcı uyumluluğu bölümüne bakın).

Ubuntu Linux, macOS Chrome'da bir tarayıcı sekmesine aktarıldı (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ü, sistem anahtarları hâlâ macOS ana makine işletim sistemi tarafından yakalanıyor ve deneyim henüz kapsamlı olmamaktadır.

Klavye Kilidi API'sini kullanma

Klavye API'sinin Keyboard arayüzü, fiziksel klavyeden basılan tuşların kaydedilmesini devre dışı bırakan işlevler ve kullanıcının klavye düzeni hakkında bilgi edinmenizi sağlayan işlevler sunar.

Ön koşul

Modern tarayıcılarda iki tür tam ekran bulunur: Tam Ekran API'sı aracılığıyla JavaScript ve kullanıcı tarafından bir klavye kısayolu ile başlatılan tam ekran. Klavye Kilidi API'si yalnızca JavaScript tarafından başlatılan tam ekran etkinken kullanılabilir. Aşağıda, JavaScript tarafından başlatılan tam ekran örneği verilmiştir:

await document.documentElement.requestFullscreen();

Özellik algılama

Klavye Kilidi API'sının desteklenip desteklenmediğini kontrol etmek için aşağıdaki düzeni kullanabilirsiniz:

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

Klavyeyi kilitleme

Keyboard arayüzünün lock() yöntemi, fiziksel klavyedeki herhangi bir tuş veya tüm tuşlar için basılan tuşların yakalanması etkinleştirildikten sonra bir vaat 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 kodu dizisi alır. Anahtar kodu sağlanmazsa tüm anahtarlar kilitlenir. Geçerli anahtar kodu değerlerinin listesi Kullanıcı Arayüzü Etkinlikleri Klavye Etkinliği kod Değerleri spesifikasyonunda mevcuttur.

Tüm tuşlar yakalanıyor

Aşağıdaki örnekte tüm tuşlar gösterilmiştir.

navigator.keyboard.lock();

Belirli tuşları yakalama

Aşağıdaki örnekte W, A, S ve D anahtarları yakalanmaktadır. Bu tuşlar, tuşa basıldığında hangi değiştiricilerin kullanıldığından bağımsız olarak yakalanır. ABD QWERTY düzeni varsayıldığında, "KeyW" kaydedildiğinde W, Üst Karakter + W, Control + W, Control + Üst Karakter + W ve W ile olan diğer tüm tuş değiştirici kombinasyonlarının uygulamaya gönderilmesi gerekir. Aynı durum "KeyA", "KeyS" ve "KeyD" için de geçerlidir.

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

Yakalanan tuşlara klavye etkinliklerini kullanarak 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 kilidini açma

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.

Demografi

Glitch'te demo sürümünü çalıştırarak Klavye Kilidi API'sini test edebilirsiniz. Kaynak koduna göz atmayı unutmayın. Aşağıdaki Tam ekrana geç düğmesi tıklandığında, demo tam ekran moduna girebilmesi için yeni bir pencerede açılır.

Güvenlikle İlgili Dikkat Edilmesi Gerekenler

Bu API ile ilgili endişelerden biri, tüm anahtarları almak için kullanılabilmesi ve (Fullscreen API ve PointerLock API ile birlikte) kullanıcının web sayfasından çıkmasını engellemek için kullanılabilmesidir. Spesifikasyon, tüm tuşlar API tarafından istense bile tarayıcının, kullanıcının klavye kilidinden çıkması için bir yol sağlaması gerekir. Chrome'da bu çıkış yolu, Klavye Kilidi'nden çıkışı tetiklemek için uzun (iki saniye) Esc tuşuna basmaktır.

Teşekkür

Bu makale Joe Medley ve Kayce Basques tarafından incelendi. Klavye Kilidi spesifikasyonu Gary Kacmarcik ve Jamie Walch tarafından yazılmıştır. Ken Suarez'in Unsplash'teki lokomotif resmi.