Как добавить сочетания клавиш на ваш сайт

Любите сочетания клавиш? Они могут помочь вам сэкономить много времени, верно? Хотели бы вы добавить сочетания клавиш на свой сайт для удобства своих посетителей? Это значительно улучшит доступность вашего сайта и навигацию.

В этой статье я дам краткое руководство по добавлению ярлыков на вашу веб-страницу с помощью библиотеки JavaScript под названием Mousetrap. С мышеловкой вы можете назначать ключи например Shift, Ctrl, Alt, Options и Command для выполнять определенные функции на вашем сайте. Это также хорошо работает в старых браузерах.

Больше на Hongkiat:

• Создание анимированной всплывающей подсказки с помощью Hint.Css
• Построение пошагового руководства с использованием Intro.Js [Учебник]
• Как оформить слайдер диапазона HTML5
• Как использовать cookie & HTML5 localstorage

Начиная

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

Теперь мы будем использовать мышеловку «Связывать» способ прикрепить клавиши клавиатуры с функцией. Вы можете назначить одна клавиша, комбинация клавиш или клавиши последовательности, например

Единый ключ

В этом примере мы связываем.

 Mousetrap.bind ('s', function (e) // ваша функция здесь…); 

Комбинированный ключ

В этом примере мы связываем Ctrl и s. Вам нужно будет нажать обе клавиши вместе, чтобы выполнить назначенную функцию.

 Mousetrap.bind ('ctrl + s', function (e) // ваша функция здесь…); 

Ключ последовательности

В этом примере пользователю нужно нажать g, а затем s впоследствии. Если вы разрабатываете веб-игру, это может быть полезно для добавления секретного комбо со скрытым ключом.

 Mousetrap.bind ('g s', function (e) // ваша функция здесь…); 

Использование мышеловки

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

Давайте начнем с чего-то простого.

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

1. Ниже приведена HTML-разметка для поиска вместе с Я бы.

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

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

3. Наконец, мы связываем клавишу для запуска функции.

 Mousetrap.bind ('/', поиск); 

4. Вот и все. Теперь вы сможете переходить к поисковому вводу, нажимая кнопку /.

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

 Mousetrap.bind (['command + f', 'ctrl + f'], поиск); 

Использование мышеловки с Bootstrap

Мышеловку легко интегрировать с фреймворком, например Bootstrap. Во втором примере мы покажем окно справки, в котором будет отображен список ярлыков, доступных на веб-сайте. Здесь я выбираю Bootstrap Modal для представления списка и обозначения? ключ, чтобы показать модальное.

Хотя ? доступно только с помощью клавиши Shift, связывая только? ключ достаточно.

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

Теперь, когда вы нажмете? ключ, появится всплывающее окно.

Совет для эффективного связывания

Со временем ваша растущая коллекция сочетаний клавиш может начать портить ваш код. Если это произойдет, вы можете добавить расширение, чтобы “связывание ключей” коды более эффективны. Это называется “словарь привязки”. Добавьте это расширение после основной библиотеки Mousetrap, mousetrap.min.js.

Теперь вместо разделения каждой привязки ключей мы можем аккуратно сгруппировать их в одну .связывания () метод, вот так:

 Mousetrap.bind ('/': search, 't': tweet, '?': Function modal () $ ('# help'). Modal ('show');, 'j': function next ( ) highLight ('j'), 'k': функция prev () highLight ('k')); 

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

• Посмотреть демо
• Скачать