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 naluriah Anda batalkan dengan tombol Escape, Anda mungkin keluar dari mode layar penuh. Pengalaman yang menjengkelkan ini disebabkan oleh fakta bahwa dialog dan mode layar penuh "berebut" tombol Escape. Ini adalah pertarungan yang tidak seimbang karena, secara default, mode layar penuh selalu menang. Namun, bagaimana cara membuat dialog menjadi pemenang untuk tombol Escape? Di sinilah Keyboard Lock API berperan.

Dukungan browser

Menggunakan Keyboard Lock API

Keyboard Lock API tersedia di navigator.keyboard. Metode lock() dari antarmuka Keyboard menampilkan promise setelah mengaktifkan pengambilan penekanan tombol untuk salah satu atau semua tombol di keyboard fisik. Metode ini hanya dapat merekam 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 merekam tombol Escape saat meminta layar penuh. Membuka kunci (yaitu, tidak lagi merekam) keyboard saat keluar dari mode layar penuh menggunakan metode unlock() dari antarmuka Keyboard.

// 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.');
  });
}

Artinya, saat pengguna berada dalam mode layar penuh, menekan Escape akan membatalkan dialog secara default. Jika pengguna menekan dan menahan tombol Escape, mereka tetap dapat keluar dari mode layar penuh. Yang terbaik dari keduanya.

Demo

Anda dapat menguji varian default dan varian yang ditingkatkan secara progresif dalam demo. Kode sumber demo kurang bersih dibandingkan cuplikan sebelumnya, karena perlu menunjukkan kedua perilaku.

Dalam praktiknya

Untuk menggunakan peningkatan progresif ini dalam praktiknya, cukup salin cuplikan sebelumnya. Dirancang untuk berfungsi tanpa perubahan yang diperlukan, bahkan dengan kode layar penuh yang ada. Sebagai contoh, lihat PR ini untuk game Freeciv. Setelah PR digabungkan, Anda dapat membatalkan semua dialog dalam game dengan menekan Escape.

Bookmarklet bonus

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.