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

Zamanlarının çoğunu tarayıcıda geçiren kullanıcıların sayısı arttıkça zengin etkileşimli web siteleri, oyunlar, uzak masaüstü aktarımı ve uygulama aktarımı, etkileyici ve tam ekran bir deneyim sunmaya çalışı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 bu tuşlar ve kısayollar kullanılabilir. Gerekebilecek 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ığı 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 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: 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ş basma işlemlerinin yakalanmasını açma/kapatma işlevlerinin yanı sıra kullanıcının klavye düzeni hakkında bilgi alma işlevleri sağlar.

Ö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 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ş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 listesi UI Events KeyboardEvent code Values spesifikasyonunda yer alır.

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 anahtarları yakalanmıştır. Bu tuşları, tuş basma işleminde hangi değiştiricilerin kullanıldığına bakılmaksızın yakalar. ABD QWERTY düzeni varsayımıyla, "KeyW" kaydetme işlemi 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ö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 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 kilidini açma

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 unlock() işlevini dolaylı olarak ç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 ile ilgili endişelerden biri, tüm anahtarları almak ve (Tam Ekran API ve PointerLock API ile birlikte) kullanıcının web sayfasından çıkmasını engellemek için kullanılabilmesidir. 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 çıkışı tetiklemek için Esc tuşuna uzun (iki saniye) basmaktır.

Teşekkür ederiz

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 hero resim.