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ında etkileyici bir tam ekran deneyimi sunar.

Thomas Steiner

Kullanıcıların çoğu zamanlarını tarayıcıda geçirmesiyle birlikte, zengin etkileşimli web siteleri, oyunlar, uzaktan masaüstü akışı ve uygulama akışı, etkileyici bir tam ekran deneyimi sunmak için çabalıyor. Bunu yapabilmek 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 oyun için kullanılabilir. Gerekli olabilecek tuşlara örnek olarak Esc, Alt + Tab, 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. Keyboard Lock API, web sitelerinin ana makine işletim sistemi tarafından izin verilen tüm kullanılabilir tuşları kullanmasını sağlar (bkz. Tarayıcı uyumluluğu).

Ubuntu Linux, macOS Chrome'daki bir tarayıcı sekmesine aktarılır (henüz tam ekran modunda çalışmaz).
Sorun: Tam ekran modunda çalışmayan ve klavye kilidi etkin olmayan bir Ubuntu Linux uzak masaüstü yayınlanıyor. Bu nedenle, sistem tuşları macOS ana makine işletim sistemi tarafından yakalanmaya devam ediyor ve deneyim henüz kapsamlı değil.

Keyboard Lock API'yi kullanma

Klavye API'sinin Keyboard arayüzü, fiziksel klavyeden tuş basma işlemlerinin yakalanmasını açıp kapatan işlevlerin yanı sıra kullanıcının klavye düzeni hakkında bilgi edinme işlevleri sağlar.

Ön koşul

Modern tarayıcılarda iki tür tam ekran bulunur: 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. Klavye Kilidi API'si yalnızca JavaScript ile başlatılan tam ekran etkin olduğunda kullanılabilir. JavaScript ile başlatılan tam ekran örneğini aşağıda görebilirsiniz:

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şlardan herhangi biri veya tümü için tuş basma işlemlerinin yakalanmasını etkinleştirdikten sonra bir söz 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 UI Events KeyboardEvent code Values spesifikasyonunda yer alır.

Tüm tuşları yakalama

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. Bu tuşları, tuşa basma işlemiyle hangi değiştiricilerin kullanıldığına bakılmaksızın yakalar. ABD QWERTY düzeni kullanıldığını varsayarsak "KeyW" tuşunun kaydedilmesi, W, Üst Karakter + W, Kontrol + W, Kontrol + Üst Karakter + W ve W ile yapılan diğer tüm tuş değiştirici 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ş basma işlemlerine 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öntemiyle 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 örtülü olarak unlock() işlevini çağırır.

Demo

Bu demoyu çalıştırarak Keyboard Lock API'yi test edebilirsiniz. Kaynak kodunu incelemeyi unutmayın. Aşağıdaki Tam ekrana geç düğmesini tıkladığınızda demo, tam ekran moduna geçebilmesi için yeni bir pencerede başlatılır.

Güvenlikle İlgili Dikkat Edilmesi Gereken Noktalar

Bu API ile ilgili bir endişe, tüm tuşları almak ve (Fullscreen API ve PointerLock API ile birlikte) kullanıcının web sayfasından çıkmasını engellemek için kullanılabileceğidir. Bunu önlemek için spesifikasyon, tarayıcının API tarafından tüm tuşlar istenmiş olsa bile kullanıcının klavye kilidinden çıkabilmesini sağlamasını zorunlu kılar. Chrome'da bu çıkış yolu, klavye kilidinden çıkışı tetiklemek için Esc tuşuna iki saniye boyunca 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.