Як додати клавіатурні скорочення на ваш сайт

Любіть комбінації клавіш? Вони можуть допомогти вам заощадити багато часу, так? Бажаєте додати клавіатурні скорочення до власного веб-сайту для ваших відвідувачів? Це значно покращить доступність вашого сайту та навігацію.

У цій публікації я дам короткий посібник про те, як додати ярлики до вашої веб-сторінки за допомогою бібліотеки JavaScript, яка називається мишоловкою. З мишоловкою ви можете призначити ключі як Shift, Ctrl, Alt, Options і Command виконувати певні функції на вашому сайті. Він також добре працює в старих браузерах.

Докладніше про Hongkiat:

• Створення анімованих підказок легко з Hint.Css
• Створення покрокового керівництва з використанням Intro.Js [Підручник]
• Як створити повзунок діапазону HTML5
• Як використовувати файли cookie і місцеві сховища HTML5

Починаємо

Почніть з створення нового HTML-документа разом із вмістом і пов'язуючи бібліотеку Mousetrap. Я буду використовувати бібліотеку Mousetrap, розміщену в CDNjs, щоб бібліотека буде обслуговуватися через мережу CloudFlare, яка повинна бути швидше, ніж наш власний сервер

Тепер ми будемо використовувати мишоловку 'bind' спосіб приєднання клавіш клавіатури до функції. Ви можете призначити клавішу, комбінацію клавіш або клавіші послідовності, наприклад

Один ключ

У цьому прикладі ми зв'язуємо s.

 Mousetrap.bind ('s', функція (e) // ваша функція тут ...); 

Комбінаційний ключ

У цьому прикладі ми зв'язуємо Ctrl і s. Щоб виконати призначену функцію, потрібно натиснути дві клавіші разом.

 Mousetrap.bind ('ctrl + s', функція (e) // ваша функція тут ...); 

Ключ послідовності

У цьому прикладі користувачеві необхідно натиснути g, а потім s згодом. Якщо ви займаєтеся розробкою веб-ігор, це може бути корисним для додавання секретної комбінації ключів.

 Mousetrap.bind ('g s', функція (e) // ваша функція тут ...); 

Використання мишоловки

Ми створимо просту веб-сторінку з кількома комбінаціями клавіш, які дозволять користувачам отримувати доступ до деяких функцій на веб-сайті. Ми будемо використовувати jQuery, щоб полегшити маніпулювання HTML-документом і виділити HTML-елементи.

Почнемо з чогось легкого.

Ми будемо прив'язувати ключ, який дозволить користувачеві швидко зосередитися на полі вводу пошуку.

1. Нижче наведено розмітку HTML для пошуку разом з id.

2. Далі, ми створюємо функцію, яка буде зосереджена на пошуку.

 функція search () var search = $ ('# search'); search.val ("); search.focus (); 

3. Нарешті, ми прив'язуємо ключ до запуску функції.

 Mousetrap.bind ('/', пошук); 

4. Це його. Тепер ви зможете переходити до вводу пошуку, натиснувши кнопку /.

Крім того, ви можете також поєднати комбінацію клавіш, Ctrl / Cmd + F, яка є популярним ключовим ярликом, який використовується для пошуку в багатьох настільних додатках:

 Mousetrap.bind (['команда + f', 'ctrl + f'], пошук); 

Використання мишоловки з Bootstrap

Легко інтегрувати мишоловку з каркасом, наприклад, Bootstrap. У цьому другому прикладі ми покажемо вікно довідки, у якому буде показано список ярликів, доступних на веб-сайті. Тут я вибираю Modal Bootstrap для представлення списку і призначення? для показу модального.

Хоча? доступний тільки за допомогою клавіші Shift, прив'язуючи тільки те? достатньо.

 Mousetrap.bind ('?', Функція () $ ('# help'). Modal ('show');); 

Тепер, коли ви потрапили? з'явиться спливаюче вікно.

Порада для ефективного прив'язки

З часом ваша зростаюча колекція сполучень клавіш може почати зіпсувати ваш код. Якщо це станеться, ви можете додати розширення, щоб зробити “прив'язка клавіш” коди більш ефективні. Вона називається “пов'язати словник”. Додайте це розширення після первинної бібліотеки Mousetrap, mousetrap.min.js.

Тепер, замість того, щоб розділяти кожну прив'язку клавіш, ми можемо акуратно згрупувати їх у один .bind () метод, так:

 Mousetrap.bind ('/': пошук, 't': tweet, '?': Функція modal () $ ('# help'). Модальна ('show');, 'j': функція наступна ( ) highLight ('j'), 'k': функція prev () highLight ('k')); 

Для більш досконалої реалізації можна переглянути демонстраційну версію, яку я зробив. У демонстраційній версії можна натиснути клавішу J або K, щоб виділити публікацію, а потім натиснути кнопку T, щоб надіслати поточний запис, який ви виділили.

• Переглянути демонстрацію
• Завантажити