Mengambil Kunci dengan Keyboard Lock API

Memberikan pengalaman layar penuh yang imersif untuk berbagai kasus penggunaan, termasuk situs interaktif, game, dan streaming aplikasi atau desktop jarak jauh.

Thomas Steiner

Dengan semakin banyaknya pengguna yang menghabiskan sebagian besar waktu mereka di browser, situs yang sangat interaktif, game, streaming desktop jarak jauh, dan streaming aplikasi berupaya memberikan pengalaman layar penuh yang imersif. Untuk melakukannya, situs memerlukan akses ke tombol khusus dan pintasan keyboard saat berada dalam mode layar penuh, sehingga dapat digunakan untuk navigasi, menu, atau game. Beberapa contoh tombol yang mungkin diperlukan adalah Esc, Alt + Tab, Cmd + `, dan Ctrl + N.

Secara default, tombol ini tidak tersedia untuk aplikasi web karena diambil oleh browser atau sistem operasi yang mendasarinya. Keyboard Lock API memungkinkan situs menggunakan semua tombol yang tersedia yang diizinkan oleh OS host (lihat Kompatibilitas browser).

Ubuntu Linux di-streaming ke tab browser di Chrome macOS (belum berjalan dalam mode layar penuh).
Masalahnya: desktop jarak jauh Ubuntu Linux yang di-streaming tidak berjalan dalam mode layar penuh dan tanpa penguncian keyboard aktif, sehingga tombol sistem masih ditangkap oleh sistem operasi host macOS dan pengalamannya belum imersif.

Menggunakan Keyboard Lock API

Antarmuka Keyboard Keyboard API menyediakan fungsi yang mengalihkan pengambilan penekanan tombol dari keyboard fisik serta mendapatkan informasi tentang tata letak keyboard pengguna.

Prasyarat

Ada dua jenis layar penuh yang tersedia di browser modern: yang dimulai oleh JavaScript melalui Fullscreen API dan yang dimulai oleh pengguna melalui pintasan keyboard. Keyboard Lock API hanya tersedia jika Layar penuh yang dimulai JavaScript aktif. Berikut adalah contoh layar penuh yang dimulai dengan JavaScript:

await document.documentElement.requestFullscreen();

Deteksi fitur

Anda dapat menggunakan pola berikut untuk memeriksa apakah Keyboard Lock API didukung:

if ('keyboard' in navigator && 'lock' in navigator.keyboard) {
  // Supported!
}

Mengunci keyboard

Metode lock() dari 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. Metode lock() menggunakan array yang berisi satu atau beberapa kode tombol untuk dikunci. Jika tidak ada kode tombol yang diberikan, semua tombol akan dikunci. Daftar nilai kode tombol yang valid tersedia dalam spesifikasi Nilai kode KeyboardEvent Peristiwa UI.

Merekam semua tombol

Contoh berikut menangkap semua penekanan tombol.

navigator.keyboard.lock();

Mendeteksi tombol tertentu

Contoh berikut menangkap tombol W, A, S, dan D. API ini menangkap tombol ini, terlepas dari pengubah yang digunakan dengan penekanan tombol. Dengan asumsi tata letak QWERTY AS, mendaftarkan "KeyW" akan memastikan bahwa W, Shift + W, Control + W, Control + Shift + W, dan semua kombinasi pengubah tombol lainnya dengan W dikirim ke aplikasi. Hal yang sama berlaku untuk "KeyA", "KeyS", dan "KeyD".

await navigator.keyboard.lock([
  "KeyW",
  "KeyA",
  "KeyS",
  "KeyD",
]);

Anda dapat merespons penekanan tombol yang direkam menggunakan peristiwa keyboard. Misalnya, kode ini menggunakan peristiwa onkeydown:

document.addEventListener('keydown', (event) => {
  if ((event.code === 'KeyA') && !(event.ctrlKey || event.metaKey)) {
    // Do something when the 'A' key was pressed, but only
    // when not in combination with the command or control key.
  }
});

Membuka kunci keyboard

Metode unlock() membuka semua kunci yang diambil oleh metode lock() dan ditampilkan secara sinkron.

navigator.keyboard.unlock();

Saat dokumen ditutup, browser selalu memanggil unlock() secara implisit.

Demo

Anda dapat menguji Keyboard Lock API dengan menjalankan demo ini. Pastikan untuk melihat kode sumbernya. Mengklik tombol Masuk ke layar penuh di bawah akan meluncurkan demo di jendela baru sehingga dapat masuk ke mode layar penuh.

Pertimbangan Keamanan

Satu masalah terkait API ini adalah API ini dapat digunakan untuk mengambil semua tombol dan (bersama dengan Fullscreen API dan PointerLock API) mencegah pengguna keluar dari halaman web. Untuk mencegah hal ini, spesifikasi mengharuskan browser menyediakan cara bagi pengguna untuk keluar dari penguncian keyboard meskipun semua tombol diminta oleh API. Di Chrome, jalan keluar ini adalah penekanan lama (dua detik) tombol Esc untuk memicu keluar dari Penguncian Keyboard.

Ucapan terima kasih

Artikel ini ditinjau oleh Joe Medley dan Kayce Basques. Spesifikasi Keyboard Lock ditulis oleh Gary Kacmarcik dan Jamie Walch.