Cara Menambahkan Pintasan Keyboard ke Situs Web Anda

Suka pintasan keyboard? Mereka dapat membantu Anda menghemat banyak waktu, bukan? Apakah Anda ingin menambahkan pintasan keyboard ke situs web Anda sendiri, untuk kepentingan pengunjung Anda? Ini akan sangat meningkatkan aksesibilitas dan navigasi situs Anda.

Dalam posting ini, saya akan memberikan panduan cepat tentang cara menambahkan cara pintas ke halaman web Anda menggunakan perpustakaan JavaScript yang disebut perangkap tikus. Dengan perangkap tikus Anda bisa tombol yang ditunjuk seperti Shift, Ctrl, Alt, Options, dan Command to melakukan fungsi tertentu di situs web Anda. Ini juga bekerja dengan baik di browser yang lebih lama.

Lebih lanjut tentang Hongkiat:

Membuat tooltip animasi dengan mudah dengan Petunjuk
Membangun panduan langkah demi langkah menggunakan Intro.Js [Tutorial]
Bagaimana gaya slider rentang HTML5
Bagaimana cara menggunakan cookie & penyimpanan lokal HTML5

Mulai

Mulailah dengan membuat dokumen HTML baru bersama dengan konten, dan menautkan perpustakaan perangkap tikus. Saya akan menggunakan pustaka perangkap tikus yang di-host di CDNjs sehingga pustaka akan dilayani melalui jaringan CloudFlare, yang seharusnya lebih cepat dari server kita sendiri

Sekarang kita akan menggunakan perangkap tikus 'mengikat' metode untuk melampirkan tombol keyboard dengan fungsi. Anda dapat menetapkan satu tombol, kombinasi tombol, atau tombol urutan, sebagai contoh

Kunci Tunggal

Dalam contoh ini, kita ikat s.

 Mousetrap.bind ('s', function (e) // fungsi Anda di sini ...);

Kunci Kombinasi

Dalam contoh ini, kita mengikat Ctrl dan s. Anda harus menekan kedua tombol secara bersamaan untuk melakukan fungsi yang ditunjuk.

 Mousetrap.bind ('ctrl + s', function (e) // fungsi Anda di sini ...);

Kunci Urutan

Dalam contoh ini, pengguna harus menekan g lalu s kemudian. Jika Anda mengembangkan game berbasis web, ini mungkin berguna untuk menambahkan kombo kunci tersembunyi yang rahasia.

 Mousetrap.bind ('g s', function (e) // fungsi Anda di sini ...);

Menggunakan perangkap tikus

Kami akan membangun halaman web sederhana dengan beberapa pintasan keyboard yang memungkinkan pengguna untuk mengakses beberapa fungsionalitas di situs web. Kami akan menggunakan jQuery untuk mempermudah memanipulasi dokumen HTML dan memilih elemen HTML.

Mari kita mulai dengan sesuatu yang mudah.

Kami akan mengikat kunci yang akan memungkinkan pengguna untuk fokus pada bidang input pencarian dengan cepat.

1. Berikut ini adalah markup HTML untuk pencarian bersama dengan id.

2. Selanjutnya, kami membuat fungsi yang akan fokus pada input pencarian.

 pencarian fungsi () var search = $ ('# search'); search.val ("); search.focus ();

3. Terakhir, kami mengikat kunci untuk menjalankan fungsi.

 Mousetrap.bind ('/', cari);

4. Itu. Anda sekarang harus dapat menavigasi ke input pencarian dengan menekan tombol /.

Sebagai alternatif, Anda juga dapat mengikat kombinasi tombol, Ctrl / Cmd + F, yang merupakan pintasan kunci populer yang digunakan untuk pencarian di banyak aplikasi desktop:

 Mousetrap.bind (['command + f', 'ctrl + f'], cari);

Menggunakan perangkap tikus dengan Bootstrap

Mudah untuk mengintegrasikan perangkap tikus dengan kerangka kerja, misalnya, Bootstrap. Dalam contoh kedua ini, kami akan menampilkan jendela bantuan yang akan menampilkan daftar pintasan yang tersedia di situs web. Di sini, saya memilih Bootstrap Modal untuk menyajikan daftar, dan menetapkan? kunci untuk menunjukkan modal.

Walaupun ? hanya dapat diakses dengan tombol Shift, hanya mengikat? kunci sudah cukup.

 Mousetrap.bind ('?', Function () $ ('# help'). Modal ('show'););

Sekarang ketika Anda menekan tombol? kunci, sebuah popup akan muncul.

Tip Untuk Penjilidan yang Efisien

Seiring waktu, koleksi pintasan keyboard Anda yang bertambah mungkin mulai mengacaukan kode Anda. Jika ini terjadi, ada ekstensi yang dapat Anda tambahkan untuk membuatnya “mengikat kunci” kode lebih efisien. Itu bernama “ikat kamus”. Tambahkan ekstensi ini setelah pustaka perangkap tikus utama, mousetrap.min.js.

Sekarang, alih-alih memisahkan setiap ikatan kunci, kita dapat dengan rapi mengelompokkannya menjadi satu .mengikat() metode, seperti:

 Mousetrap.bind ('/': search, 't': tweet, '?': Function modal () $ ('# help'). Modal ('show');, 'j': fungsi selanjutnya ( ) highLight ('j'), 'k': function prev () highLight ('k'));

Untuk implementasi lebih lanjut, Anda dapat melihat demo yang saya buat. Dalam demo, Anda dapat menekan tombol J atau K untuk menyorot posting, dan tekan T untuk tweet posting saat ini yang Anda sorot.

Lihat Demo
Unduh