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.
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).
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.
Faydalı bağlantılar
- Spesifikasyon taslağı
- GitHub deposu
- ChromeStatus girişi
- Chrome izleme hatası
- Standart klavyeler için anahtar kodlar
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.