Как да добавите клавишни комбинации към вашия сайт

Обичате клавишните комбинации? Те могат да ви помогнат да спестите много време, нали? Искате ли да добавите клавишни комбинации към собствения си уебсайт в полза на посетителите си? Това значително ще подобри достъпността и навигацията на сайта Ви.

В тази публикация ще ви дам кратко ръководство за това как да добавите преки пътища към вашата уеб страница с помощта на JavaScript библиотека, наречена Mišetrap. С Mousetrap можете посочете ключове като Shift, Ctrl, Alt, Options и Command to изпълнява определени функции във вашия уебсайт. Той работи добре и в по-старите браузъри.

Повече за Hongkiat:

Създаване на анимирани подсказки лесно с Hint.Css
Изграждане на ръководство стъпка по стъпка с помощта на Intro.Js [Инструкция]
Как се оформя плъзгач за обхват HTML5
Как се използва cookie & HTML5 местното съхранение

Приготвяме се да започнем

Започнете с създаване на нов HTML документ заедно със съдържанието и свързване на библиотеката с Mišetrap. Ще използвам библиотека Mousetrap, хоствана в CDNjs, така че библиотеката да бъде обслужвана чрез мрежата на CloudFlare, която трябва да бъде по-бърза от нашия собствен сървър

Сега ще използваме капанчето "Свързва" метод за прикачване на клавишите на клавиатурата с функция. Можете да зададете един клавиш, клавишна комбинация или клавиши за последователност, например

Единичен ключ

В този пример свързваме s.

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

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

В този пример свързваме Ctrl и s. Вие ще трябва да натиснете двете ключови бутони заедно, за да изпълните определената функция.

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

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

В този пример потребителят трябва да натиснете g и след това с впоследствие. Ако разработвате уеб-базирана игра, това може да е полезно за добавяне на тайно скрито ключово комбо.

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

Използване на капан

Ние ще изградим проста уеб страница с няколко клавишни комбинации, които позволяват на потребителите да имат достъп до някои функции на уебсайта. Ще използваме jQuery, за да улесним манипулирането на HTML документа и да изберем HTML елементи.

Нека започнем с нещо лесно.

Ще свържем ключ, който ще позволи на потребителя да се съсредоточи бързо върху полето за въвеждане на търсене.

1. Следното е HTML маркировката за търсене заедно с документ за самоличност.

2. След това създаваме функция, която ще се фокусира върху търсенето.

 функция 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 ('?', Функция () $ ('# help'). Modal ('show'););

Сега, когато удариш? ще се появи изскачащ прозорец.

Съвет За ефективно свързване

С течение на времето нарастващата ви колекция от клавишни комбинации може да започне да обърква кода ви. Ако това се случи, има разширение, което можете да добавите, за да направите своя “ключова връзка” по-ефективни. Нарича се “обвързвам речник”. Добавете това разширение след основната библиотека на Mousetrap, mousetrap.min.js.

Сега, вместо да разделяме всеки бутон за свързване, можем да ги спретнато групираме в един .свързване () метод:

 Mousetrap.bind ('/': търсене, 't': tweet, '?': Функция modal () $ ('# help'). Modal ('show');, 'j': функция next ( ) highLight ('j'), 'k': функция prev () highLight ('k'));

За по-усъвършенствана реализация можете да видите демото, което направих. В демонстрацията можете да натиснете клавиша J или K, за да маркирате публикацията, и натиснете T, за да чуете текущия пост, който сте маркирали.

Преглед на демо
Изтегли