В этой статье вы прочитаете о JavaScript библиотеки mousetrap.js, для работы с клавишами и комбинацией клавиш.
Установка mousetrap.js:
Но перед тем как начать работать, нужно её установить, можно это сделать через HTML или NPM.
HTML:
Через HTML имеется ввиду, что будем подключать файл, но для это сначала надо его скачать, для этого заходим на GitHub проекта и скачиваем его от туда.
Как видите, мы просто нажимаем «Clone or download», после нажимаем «Download ZIP», тем самым вы скачаете ZIP архив.
После того как вы его скачали, перемешаете файл «mousetrap.min.js» из архива в папку с вашем проектом и подключаете через тег <script>.
1 | <script src="./mousetrap.min.js"></script> |
После этого должно всё работать.
NPM:
Через NPM очень легко, просто впишите этот код.
1 | npm install mousetrap |
То есть всё просто.
Работа с mousetrap.js:
Теперь перейдём к работе, пожалуй эта самая простая библиотека которая существует для JavaScript, по крайне мере я легче этой не видел ещё.
Что бы работать с этой библиотекой, вам просто нужно запомнить одну команду, Mousetrap.bind, вот не большой пример кода.
1 2 3 | Mousetrap.bind('a', function() { alert('Нажата клавиша a') }); |
Давайте разберём этот код, а точнее саму функцию, первым параметром в Mousetrap.bind, идёт символ клавиши которую нужно нажать, в нашем случае, это английская буква «a».
После идёт функция, которая будет срабатывать когда нажата нужная кнопка, вот результат работы.
Но у этой библиотеки есть один минус, дело в том, что если нажать русскую буквы «ф», то программа не будет работать, хота это буква находится на одной клавиши что и английской «a».
Но что бы так не происходило, можно просто эти символы поместить в массив и использовать его в качестве первого параметра, вот пример.
1 2 3 | Mousetrap.bind(['a', 'ф'], function() { alert('Нажата клавиша a или ф') }); |
Теперь можно нажимать использовав русскую и английскую раскладку.
Также надо сказать, что вы можете использовать спец-клавиши, например, «Ctrl» или «Tab», вот пример.
1 2 3 | Mousetrap.bind('ctrl', function() { alert('Нажата клавиша ctrl') }); |
То есть вы просто пишете название этой спец-клавиши которая вам нужна, в нижнем регистре и всё, в нашем случае эта клавиша «Ctrl».
Последняя из ключевых возможностей этой библиотеки, это возможно делать какое то действие при нажатие комбинации клавиш, вот не большой пример.
1 2 3 | Mousetrap.bind(['ctrl+a', 'ctrl+ф'], function() { alert('Нажата клавиша ctrl+a') }); |
Как видите вы просто пишите плюс и ещё одну клавишу, ещё вы можете хоть сколько так добавлять клавиш, которые нужно нажать вместе, у вас нет ограничений в этом плане.
Вывод:
В этой статье вы прочитали про JavaScript библиотеку mousetrap.js, для работы с клавишами и комбинацией клавиш.
Также стоит сказать, что возможно обзор на эту библиотеку, не много бессмысленный, так как, она очень простая, но если вы всё таки заинтересовались её, то посмотрите более полную документацию.
Подписываетесь на соц-сети:
Оценка:
Загрузка...