Tam ekran modunda Escape tuşunu yakalamak için Klavye Kilidi API'sini kullanın.
Daha önce oyun içinde bir diyalog penceresi açıp Escape tuşuyla içgüdüsel olarak iptal ettiğiniz bir tam ekran web oyunu oynadıysanız muhtemelen kendinizi tam ekran modundan çıkarmışsınızdır. Bu sinir bozucu deneyim, iletişim kutusu ve tam ekran modunun Escape tuşu için "kavga" olmasından kaynaklanmaktadır. Bu her zaman eşit değildir çünkü varsayılan olarak tam ekran modu her zaman kazanır. Peki iletişim kutusunu Escape tuşu için daha başarılı hale nasıl getirebilirsiniz? Klavye Kilidi API'si burada devreye girer.
Tarayıcı desteği
Klavye Kilidi API'sini kullanma
Klavye Kilidi API'si navigator.keyboard. üzerinde kullanılabilir
Keyboard arayüzünün lock() yöntemi, fiziksel klavyedeki tuşların herhangi biri veya tümü için
tuşların 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. Neyse ki Escape tuşu bunlardan biridir.
Uygulamanızda tam ekran modu varsa tam ekran isteğinde bulunurken Escape tuşunu yakalayarak Klavye Kilidi API'sini aşamalı bir iyileştirme olarak kullanın. Keyboard arayüzünün unlock() yöntemini kullanarak tam ekran modundan çıkarken klavyenin kilidini açın (yani artık yakalamayın).
// Feature detection.
const supportsKeyboardLock =
('keyboard' in navigator) && ('lock' in navigator.keyboard);
if (supportsKeyboardLock) {
document.addEventListener('fullscreenchange', async () => {
if (document.fullscreenElement) {
// The magic happens here… 🦄
await navigator.keyboard.lock(['Escape']);
console.log('Keyboard locked.');
return;
}
navigator.keyboard.unlock();
console.log('Keyboard unlocked.');
});
}
Bu, kullanıcı tam ekran modundayken Escape tuşuna basıldığında, iletişim kutusunun varsayılan olarak iptal edileceği anlamına gelir. Kullanıcı, Escape tuşuna basıp basılırsa tam ekran modundan yine çıkabilir. İki özelliğin de en iyisi.
Demo
Hem varsayılan hem de aşamalı olarak geliştirilmiş varyantları demoda test edebilirsiniz. Demonun kaynak kodu her iki davranışı da göstermesi gerektiği için önceki snippet'e göre daha az temizdir.
Uygulamada
Bu progresif geliştirmeyi pratikte kullanmak için önceki snippet'i kopyalamanız yeterlidir. Mevcut tam ekran koduyla bile hiçbir değişiklik gerektirmeden çalışacak şekilde tasarlanmıştır. Örnek olarak Freeciv adlı oyunun PR'sini inceleyebilirsiniz. PR birleştirildikten sonra Escape tuşuna basarak tüm oyun içi iletişim kutularını iptal edebilirsiniz.
Bonus bir yer işareti uygulaması
Tam ekran modunu destekleyen her uygulama veya oyun açık kaynaklı olmaz veya yamalarınızı kabul etmez. Daha iyi tam ekran modunu etkinleştirmek için aşağıdaki yer işareti uygulaması yer işaretleri çubuğunuza eklenebilir ve tıklanabilir.