Escape tuşunu tam ekran modunda yakalamak için Klavye Kilidi API'sını kullanın.
Tam ekran bir web oyunu oynadıysanız ve oyun içi iletişim kutusuyla karşılaştığınız ve Escape tuşuyla içgüdüsel olarak iptal ettiğiniz bir web oyunu olduysa 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 "dövüşmesi"nden kaynaklanır. Bu eşit olmayan bir savaş çünkü varsayılan tam ekran modu her zaman kazanır. Peki, diyaloğu nasıl Escape tuşu için en iyisi yapabilirsiniz? Klavye Kilidi API'si burada devreye girer.
Tarayıcı desteği
Klavye Kilidi API'sini kullanma
Klavye Kilidi API'si navigator.keyboard. tarihinde kullanılabilir: Keyboard arayüzünün lock() yöntemi, fiziksel klavyedeki herhangi bir tuş veya tüm tuşlara basılması etkinleştirildikten sonra bir vaat sağlar. 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 progresif iyileştirme olarak Klavye Kilidi API'sini kullanın. Keyboard arayüzünün unlock() yöntemiyle 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 Esc tuşuna basıldığında iletişim kutusunun varsayılan olarak iptal edileceği anlamına gelir. Kullanıcı, Escape tuşunu basılı tutarsa tam ekran modundan da çıkabilir. İki tarafın da en iyisi.
Demografi
Hem varsayılan hem de aşamalı olarak geliştirilmiş varyantları demoda test edebilirsiniz. Demonun kaynak kodu, her iki davranışı da göstermesi gerektiğinden yukarıdaki snippet'ten daha az temizdir.
Uygulamada
Bu progresif geliştirmeyi pratikte kullanmak için yukarıdaki snippet'i kopyalamanız yeterlidir. Mevcut tam ekran koduyla bile, herhangi bir değişiklik yapılmadan çalışacak şekilde tasarlanmıştır. Örneğin, Freeciv oyunu için PR'ye bakın. Halkla ilişkiler birleştirildikten sonra Esc tuşuna basarak tüm oyun içi iletişim kutularını iptal edebilirsiniz.
Bonus yer işareti uygulaması
Tam ekran modunu destekleyen her uygulama veya oyun açık kaynaklı olmayacak veya yamaları kabul etmeyecektir. Daha iyi bir tam ekran modunu etkinleştirmek için yer işaretleri çubuğunuza aşağıdaki yer işareti ekleyebilirsiniz.