Klavye Kilidi API'si ile Tuşları Yakalama

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

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. Bunu yapmak için sitelerin tam ekran modundayken özel tuşlara ve klavye kısayollarına erişmesi gerekir. Böylece gezinme, menüler veya oyunlar için kullanılabilirler. Gerekli olabilecek tuşlara örnek olarak Esc, Alt + Sekme, Cmd + ` ve Ctrl + N verilebilir.

Bu tuşlar, tarayıcı veya temel işletim sistemi tarafından yakalandığı için varsayılan olarak web uygulaması tarafından 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 aktarıldı (henüz tam ekran modunda çalışmıyor).
Sorun: Yayınlanan Ubuntu Linux uzak masaüstü tam ekran modunda çalışmıyor ve etkin klavye kilidi yok. Bu nedenle sistem anahtarları macOS ana makine işletim sistemi tarafından hâlâ yakalanıyor ve deneyim henüz tam olarak sürükleyici değil.

Klavye Kilidi API'sini kullanma

Klavye API'sinin Keyboard arayüzü, fiziksel klavyeden tuş basamaları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 vardır: Tam Ekran API aracılığıyla JavaScript tarafından başlatılan ve kullanıcı tarafından klavye kısayoluyla başlatılan. 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ş basma işlemlerinin 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 kodu dizisi 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ı yakalama

Aşağıdaki örnekte tüm tuş basışları yakalanmaktadır.

navigator.keyboard.lock();

Belirli anahtarları yakalama

Aşağıdaki örnekte W, A, S ve D tuşları yakalanır. Bu tuşları, tuş basma işleminde hangi değiştiricilerin kullanıldığına bakılmaksızın yakalar. ABD QWERTY düzeni varsa "KeyW"'ü kaydettiğinizde W, Üst Karakter + W, Denetleyici + W, Denetleyici + Üst Karakter + W ve W içeren 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, bu kodda onkeydown etkinliği kullanılmaktadı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 döndürür.

navigator.keyboard.unlock();

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

Demo

Klavye Kilidi API'sini Glitch'te demo'yu çalıştırarak 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 girebilir.

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. Bu durumu önlemek için spesifikasyon, API tarafından tüm tuşlar istendiğinde bile kullanıcının klavye kilidinden çıkabileceği bir yöntem sunmasını zorunlu kılar. Chrome'da bu çıkış kapısı, Klavye Kilidi'nden çıkmayı tetiklemek için Esc tuşuna uzun (iki saniye) basmaktı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. Unsplash'taki Ken Suarez tarafından oluşturulan lokomotif resim.