Keyboard Lock API ile daha iyi tam ekran modu

Tam ekran modunda Escape tuşunu yakalamak için Keyboard Lock API'yi kullanın.

Thomas Steiner

Daha önce tam ekran web oyunu oynarken oyun içi bir iletişim kutusu açıldıysa ve bu iletişim kutusunu Escape tuşuyla iptal ettiyseniz tam ekran modundan çıkmış olabilirsiniz. Bu sinir bozucu deneyimin nedeni, iletişim kutusu ve tam ekran modunun Escape tuşu için "mücadele etmesidir". Varsayılan olarak tam ekran modu her zaman kazandığı için bu eşitsiz bir mücadeledir. Ancak iletişim kutusunu Escape tuşunun kazananı nasıl yapabilirsiniz? Bu noktada Keyboard Lock API devreye girer.

Tarayıcı desteği

Klavye Kilidi API'sini kullanma

Keyboard Lock API, navigator.keyboard. Keyboard arayüzünün lock() yönteminde kullanılabilir. Bu yöntem, fiziksel klavyedeki tuşlardan herhangi birinin veya tümünün 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. Neyse ki Escape tuşu bunlardan biri.

Uygulamanızda tam ekran modu varsa tam ekran isteğinde bulunurken Escape tuşunu yakalayarak Keyboard Lock API'yi aşamalı bir geliş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ılı tutarak tam ekran modundan çıkabilir. İki dünyanın da en iyisi.

Demo

Hem varsayılan hem de kademeli olarak geliştirilmiş varyantları demoda test edebilirsiniz. Her iki davranışı da göstermesi gerektiğinden, demoda kullanılan kaynak kodu, önceki snippet'ten daha az temizdir.

Uygulamada

Bu aşamalı iyileştirmeyi uygulamada kullanmak için önceki snippet'i kopyalamanız yeterlidir. Mevcut tam ekran kodunda bile herhangi bir değişiklik yapılması gerekmeden çalışacak şekilde tasarlanmıştır. Örnek olarak, Freeciv oyunuyla ilgili bu PR'yi inceleyin. Çekme isteği birleştirildikten sonra Escape tuşuna basarak tüm oyun içi iletişim kutularını iptal edebilirsiniz.

Bonus yer işareti uygulaması

Tam ekran modunu destekleyen tüm uygulamalar veya oyunlar açık kaynaklı değildir ya da yamalarınızı kabul etmez. Daha iyi bir tam ekran modu etkinleştirmek için aşağıdaki yer işaretini yer işaretleri çubuğunuza ekleyip tıklayabilirsiniz.