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

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

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

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

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

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-разметка для поиска вместе с идентификатором.

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

функция поиска () {
var search = $ (‘# search’);
search.val ( ”);
search.focus ();
}

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

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

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

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

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

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

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

Mousetrap.bind (‘?’, Function () {
$ ( ‘# Помощь’) модальный ( ‘шоу’).
});

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

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

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

Mousetrap.bind ({
‘/’: поиск,
‘t’: твит,
‘?’: function modal () {$ (‘# help’). modal (‘show’); },
‘j’: функция next () {highLight (‘j’)},
‘k’: функция prev () {highLight (‘k’)}
});

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