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

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

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

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

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

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

$(document).keydown(function(e){
    if(e.which === 91){
        $('#Keyboard-Window').toggleClass('Open');
    }
    return e;
});

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

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

$(document).keydown(function(e){
    if(e.which === 17 && e.which === 87){
        $('#Keyboard-Window').toggleClass('Open');
    }
    return e;
});

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

$(document).keydown(function(e){
    if(e.which === 17 && e.which === 87){
        $('#Keyboard-Window').toggleClass('Open');
    }
    else if(e.which === 91){
        $('#Keyboard-Window').toggleClass('Open');
    }
    return e;
});

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

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

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

<div id="Keyboard-Window" class="Close">
    <form>
        <span>
            <img src="https://image.flaticon.com/icons/svg/116/116836.svg">
        </span>
        <input type="search" placeholder="Поиск">
    </form>
</div>

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

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

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