Gunakan Keyboard Lock API untuk merekam tombol Escape dalam mode layar penuh.
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.
Dukungan browser
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 =
('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 per default. Jika pengguna menekan dan menahan tombol Escape, mereka masih dapat keluar dari mode layar penuh. Terbaik dari keduanya.
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.
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.
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.