Веб-Острова Анатолия Куликова

Следим за клавиатурой с помощью JS

Следим за клавиатурой с помощью JS

Когда мы пользуемся сайтами с помощью смартфона или планшета, во взаимодействии мы ограничены тачскрином и несколькими пальцами (зачастую — двумя). А вот когда мы выходим в интернет с ноутбука/пк, то у нас появляется уже клавиатура и мышка (при сохранении тех же пальцев) — а это уже много.

В основном мы пользуемся мышкой (либо трекпадом), но есть варианты и задействовать клавиатуру. В этом уроке мы не будем отслеживать клавиши, нажимаемые пользователям — это нехорошо — а задействуем клавиатуру при работе с сайтом.

Для примера мы сделаем модальное окно с поиском, вызываемое с помощью клавиатуры. Признаюсь — идею для примера мне подсказал Spotlight.

Итак, сначала подключим JQuery для того, чтобы можно было реализовать слежение за нажатием клавиш просто.

Теперь сам код:

Прокомментирую написанное — мы будем отслеживать нажатие клавиш в документе, и когда мы будем нажимать нужную нам клавишу, то мы в указанном по id (#Keyboard-Window) div’е переключаем класс.

Причем, можно сделать вызов не только по одной клавише, а например с помощью двух — например Ctrl+W. Тогда код будет выглядеть следующим образом:

Кроме того, мы можем в одном скрипте создать вызовы нескольких блоков следующим образом:

В данном случае функция сработает при нажатии Ctrl+W или Win (Command). Для того, чтобы вы могли самостоятельно выбрать нужные вам клавиши, держите картинку-табличку.

Keyboard Code

Здесь отнюдь не все кнопки, которые могут быть на клавиатуре — остальные ищите в поиске. Однако и этих кнопок должно хватить.

Теперь создадим html-код самой формы:

Мы сделаем простой блок, который будет раскрываться на полный экран, а внутри него по центру сделаем форму поиска.

Итоговый результат — для того, чтобы опробовать, нажмите на область с картинкой и нажмите на кноку WIN или Command:

Пользуйтесь на здоровье.

Анатолий Куликов

Анатолий Куликов

Автор блога, дизайнер, веб-разработчик