Klavye Kilidi API'si ile Tuşları Yakalama

Etkileşimli web siteleri, oyunlar ve uzaktan masaüstü ya da 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 gezinme, menüler veya oyun için kullanılabilecek özel tuşlara ve klavye kısayollarına erişmesi gerekir. Gerekli olabilecek tuşlara örnek olarak Esc, Alt + Tab, Cmd + ` ve Ctrl + N verilebilir.

Bu tuşlar, 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ıyor (henüz tam ekran modunda çalışmıyor).
Sorun: Tam ekran modunda ve klavye kilidi etkin olmadan çalıştırılan, Ubuntu Linux'ta uzaktan masaüstü akışı yapılıyor. Bu nedenle, sistem tuşları macOS ana makine işletim sistemi tarafından yakalanmaya devam ediyor ve deneyim henüz tam olarak kapsayıcı 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ı etkinleştirildikten 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 tuş kodu dizisi alır. Anahtar kodu sağlanmazsa tüm anahtarlar kilitlenir. Geçerli anahtar kodu değerlerinin listesini UI Events KeyboardEvent code Values spesifikasyonunda bulabilirsiniz.

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ştiriciler kullanıldığına bakılmaksızın yakalanır. 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 kullanı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() çağrısında bulunur.

Demo

Bu demoyu çalıştırarak Keyboard Lock API'yi test edebilirsiniz. Kaynak koduna göz atmayı unutmayın. Aşağıdaki Tam ekran düğmesini tıkladığınızda demo, tam ekran moduna girebilmesi 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ılabilmesidir. 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 çıkabilmesi için bir yol 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. Ken Suarez'in Unsplash'teki hero resmi.