Cara Tambah Pintasan Papan Kekunci ke Laman Web Anda

Pintasan papan kekunci suka? Mereka boleh membantu anda menjimatkan banyak masa, bukan? Adakah anda ingin menambah pintasan papan kekunci ke laman web anda sendiri, untuk kepentingan pelawat anda? Ia akan meningkatkan lagi akses dan navigasi tapak anda.

Di dalam catatan ini, saya akan memberikan panduan cepat tentang bagaimana untuk menambah pintasan ke halaman web anda menggunakan perpustakaan JavaScript yang dipanggil Mousetrap. Dengan perangkap tikus anda boleh tetapkan kunci seperti Shift, Ctrl, Alt, Pilihan, dan Perintah untuk melaksanakan fungsi tertentu di laman web anda. Ia juga berfungsi dengan baik di pelayar lama.

Lagi mengenai Hongkiat:

• Membuat petua alat animasi dengan mudah dengan Hint.Css
• Membina panduan langkah demi langkah menggunakan Intro.Js [Tutorial]
• Bagaimana cara mengagumkan slider pelbagai HTML5
• Cara menggunakan cookie & HTML5 localstorage

Bermula

Mulailah dengan membuat dokumen HTML baru bersama kandungan, dan menghubungkan perpustakaan Mousetrap. Saya akan menggunakan perpustakaan Mousetrap yang dihoskan dalam CDNjs supaya perpustakaan akan dihidangkan melalui rangkaian CloudFlare, yang sepatutnya lebih cepat daripada pelayan kami sendiri

Sekarang kita akan menggunakan perangkap tikus 'bind' kaedah untuk melampirkan kunci papan kekunci dengan fungsi. Anda boleh menetapkan satu kunci, kombinasi utama, atau kekunci urutan, sebagai contoh

Kunci Tunggal

Dalam contoh ini, kita mengikat s.

 Mousetrap.bind ('s', function (e) // your function here ...); 

Kunci Gabungan

Dalam contoh ini, kita mengikat Ctrl dan s. Anda perlu menekan dua kunci untuk melaksanakan fungsi yang ditetapkan.

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

Kunci Urutan

Dalam contoh ini, pengguna perlu menekan g dan kemudian s kemudiannya. Jika anda sedang membangunkan permainan berasaskan web ini mungkin berguna untuk menambahkan kombo utama tersembunyi rahsia.

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

Menggunakan Mousetrap

Kami akan membina laman web mudah dengan beberapa pintasan papan kekunci yang membolehkan pengguna mengakses beberapa fungsi di laman web. Kami akan menggunakan jQuery untuk memudahkan untuk memanipulasi dokumen HTML dan memilih elemen HTML.

Mari kita mulakan dengan sesuatu yang mudah.

Kami akan mengikat kunci yang membolehkan pengguna memfokuskan pada medan input carian dengan cepat.

1. Berikut adalah markup HTML untuk carian bersama dengan ID.

2. Seterusnya, kami membuat fungsi yang akan memberi tumpuan kepada input carian.

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

3. Akhir sekali, kami mengikat kunci untuk menjalankan fungsi tersebut.

 Mousetrap.bind ('/', carian); 

4. Matlamatnya. Anda sekarang boleh menavigasi ke input carian dengan menekan butang /.

Secara bergantian, anda juga boleh mengikat kombinasi kunci, Ctrl / Cmd + F, yang merupakan pintasan utama yang digunakan untuk pencarian di banyak aplikasi desktop:

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

Menggunakan Perangkap Tikus dengan Bootstrap

Adalah mudah untuk mengintegrasikan perangkap tikus dengan rangka, contohnya, Bootstrap. Dalam contoh kedua ini, kami akan menunjukkan tetingkap bantuan yang akan memaparkan senarai pintasan yang terdapat di laman web. Di sini, saya memilih untuk Bootstrap Modal untuk membentangkan senarai itu, dan menetapkan? kunci untuk menunjukkan modal.

Walaupun ? hanya boleh diakses dengan kunci Shift, mengikat hanya? kunci adalah mencukupi.

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

Sekarang apabila anda memukul? kunci, pop timbul akan muncul.

Petua untuk mengikat berkesan

Lama kelamaan, koleksi pintasan papan kekunci anda yang semakin meningkat mungkin akan merosakkan kod anda. Jika ini berlaku, ada lanjutan yang boleh anda tambah untuk membuat anda “mengikat kunci” kod lebih cekap. Ia dinamakan sebagai “mengikat kamus”. Tambah lanjutan ini selepas perpustakaan Mousetrap utama, mousetrap.min.js.

Kini, bukannya memisahkan setiap mengikat utama, kita dapat dengan mudah mengelompokkannya dalam satu .mengikat () kaedah, seperti itu:

 Mousetrap.bind ('/': search, 't': tweet, '?': Function capital () $ ('# help'). ) highLight ('j'), 'k': fungsi prev () highLight ('k')); 

Untuk pelaksanaan yang lebih maju, anda dapat melihat demo yang telah saya buat. Dalam demo, anda boleh menekan kekunci J atau K untuk menyerlahkan siaran, dan tekan T untuk tweet siaran semasa yang anda diserlahkan.

• Lihat Demo
• Muat turun