Mode layar penuh yang lebih baik dengan Keyboard Lock API

Gunakan Keyboard Lock API untuk merekam tombol Escape dalam mode layar penuh.

Thomas Steiner

Jika Anda pernah memainkan game web layar penuh yang memunculkan dialog dalam game yang secara insting Anda batalkan dengan tombol Escape, Anda mungkin akan dikeluarkan dari mode layar penuh. Pengalaman yang menjengkelkan ini disebabkan oleh fakta bahwa dialog dan mode layar penuh "berlawan" untuk tombol Escape. Ini pertarungan yang tidak setara karena, secara {i>default<i}, mode layar penuh selalu menang. Namun, bagaimana cara menjadikan dialog pemenang untuk kunci Escape? Di sinilah Keyboard Lock API mulai berperan.

Tekan tombol Escape untuk keluar dari mode layar penuh.

Dukungan browser

Dukungan Browser

  • 68
  • 79
  • x
  • x

Sumber

Menggunakan Keyboard Lock API

Keyboard Lock API tersedia di navigator.keyboard.. Metode lock() antarmuka Keyboard menampilkan promise setelah mengaktifkan pengambilan penekanan tombol untuk salah satu atau semua tombol pada keyboard fisik. Metode ini hanya dapat menangkap kunci yang diberi akses oleh sistem operasi yang mendasarinya. Untungnya tombol Escape adalah salah satunya.

Jika aplikasi Anda memiliki mode layar penuh, gunakan Keyboard Lock API sebagai peningkatan progresif dengan mengambil tombol Escape saat meminta layar penuh. Buka kunci (yaitu, tidak lagi merekam) keyboard saat keluar dari mode layar penuh melalui metode unlock() antarmuka Keyboard.


// Feature detection.
const supportsKeyboardLock =
    (&#39;keyboard&#39; in navigator) &amp;&amp; (&#39;lock&#39; in navigator.keyboard);

if (supportsKeyboardLock) {
  document.addEventListener(&#39;fullscreenchange&#39;, async () =&gt; {
    if (document.fullscreenElement) {
      // The magic happens here… 🦄
      await navigator.keyboard.lock([&#39;Escape&#39;]);
      console.log(&#39;Keyboard locked.&#39;);
      return;
    }
    navigator.keyboard.unlock();
    console.log(&#39;Keyboard unlocked.&#39;);
  });
}

Artinya, saat pengguna berada dalam mode layar penuh, menekan Escape akan membatalkan dialog per default. Jika pengguna menekan dan menahan tombol Escape, mereka masih dapat keluar dari mode layar penuh. Terbaik dari keduanya.

Tekan dan tahan tombol Escape untuk keluar dari mode layar penuh.

Demo

Anda dapat menguji varian default dan varian yang ditingkatkan secara progresif di demo. Kode sumber demo kurang bersih dibandingkan cuplikan di atas, karena harus menampilkan kedua perilaku.

Demo mode layar penuh yang lebih baik.

Dalam praktik

Untuk menggunakan {i>progressive enhancement<i} ini, cukup salin cuplikan di atas. Kode ini dirancang untuk berfungsi tanpa perubahan yang diperlukan, bahkan dengan kode layar penuh yang sudah ada. Sebagai contoh, lihat PR ini untuk game Freeciv. Setelah PR digabungkan, Anda dapat membatalkan semua dialog dalam game dengan menekan Escape.

Permintaan pull GitHub yang menambahkan kunci keyboard ke game Freeciv.

Bonus bookmarklet

Tidak semua aplikasi atau game yang mendukung mode layar penuh bersifat open source atau menerima patch Anda. bookmarklet berikut dapat ditambahkan ke panel bookmark dan diklik untuk mengaktifkan mode layar penuh yang lebih baik.