Lebih Interaktif dengan Keyboard Shortcut pakai EmboJS

Share:

Hello world's! Kita suka sekali dengan jalan pintas. Kalau ada yang cepet kenapa engga? Dimanapun berada kita suka dengan pintasan, mulai dari jalan raya, mengerjakan tugas, hingga pada halaman website. Dengan pintasan, penggunaan web app bisa semakin efisien.

Contoh paling sering penggunaan pintasan pada halaman web ialah tombol escape. Dimana tombol ini ketika ditekan akan menghilangkan sesuatu yang menghalangi pandangan kita, misalnya seperti modal box. Tak hanya escape, tombol-tombol lain juga bisa kita manfaatkan sebagai shortcut guna meningkatkan pengalaman pengguna yang baik.

Namun pintasan tidak sepenuhnya meningkatkan pengalaman pengguna, tergantung siapa dulu penggunanya. Apakah mereka para muda-mudi yang gemar cara cepat, ataukah orang-orang "berumur" yang suka dengan "sesuatu yang jelas". Jadi shortcut escape ini gak akan berfungsi sepenuhnya apabila penggunanya adalah bapak-bapak yang lebih suka repot mengarahkan pointer pada tombol silang kemudian meng-kliknya untuk menghilangkan modal box.

Shortcut dapat menjadi solusi ketika halaman yang dilihat itu ga enak dilihat, terlalu banyak elemen berbaris memenuhi lahan kosong yang tersisa. Tapi juga jangan lupa untuk memunculkan tips penggunaan shortcut agar pengguna tidak membatin "ini gimana??".

Karena masalah ini berada di tampilan, maka Javascript-lah yang berwenang untuk mengatasinya.

Kali ini kita akan pakai library JS yang membantu kita bikin tampilan dan tidak memberatkan halaman yang akan kita buat. Karena library ini hanya berisi fungsi-fungsi yang seringkali kita perlukan saja.

Pertama, kita bikin dulu file html-nya

<!DOCTYPE html>
<html>
<head>
     <meta charset="UTF-8">
     <title>Keyboard Shortcut</title>
</head>
<body>
     <h1>Nyoba nekan keyboard di website</h1>
</body>
</html>

Oh iya, jangan lupa menyisipkan library-nya ke file html-nya. Taruh kode ini sebelum </body>


<script src="http://cdn.riyansatria.tk/embo.js"></script>

Kemudian, masukkan script ini diatasnya script di atas

<script>
tekan("e", function() {
     // Taruh callback disini
     alert("Kamu menekan tombol E")
})
</script>

Coba sekarang buka file html-nya dan coba tekan tombol "e", nanti bakalan muncul alert "Kamu menekan tombol E". Tombol ini bisa kamu ganti sesuai kebutuhan kamu, mau diganti 1, 2, t, i, atau apalah, bisa kok.

"Gimana kalau aku pengen ada kombinasi ctrl-nya?"

Ya tinggal ditambahin "ctrl" aja. Nih aku kasih contoh jelasnya.

<script>
tekan("ctrl y", function() {
     alert("Kamu menekan tombol ctrl + y")
})
tekan("alt y", function() {
     alert("Kamu menekan tombol alt + y")
})
</script>

Sekarang kamu tekan tombol ctrl+y sama alt+y nya. Entar bakal muncul alert-nya. Jadi kamu ga hanya cuma bisa menekan 'tombol sendirian', kamu juga bisa menekan 'tombol berpasangan'. Tapi ada beberapa kombinasi tombol yang gak bisa kamu pakai, seperti ctrl+r dimana ini adalah kombinasi untuk mereload halaman pada semua jenis browser. Happy coding...!!

Tidak ada komentar