megafon4u.ru

Иногда нужно чтоб страница взаимодействовала с пользователем через нажатие на клавиатуре определенных клавиш. Это намного повышает юзабилити сайта. К примеру, при нажатии на CTRL + СТРЕЛКА ВПРАВО мы переходили бы на следующую страницу, а при нажатии на CTRL + СТРЕЛКА ВЛЕВО на предыдущую; при нажатии на ENTER элементы формы должны из неактивного состояния перейти в активное, а при нажатии на DELETE наоборот; при нажатии на ESCAPE должен исчезнуть поп-ап и многое многое другое.

Сделать это не сложно. Нужно всего лишь знать числовой код кнопки, при нажатии на которую должно произойти нужное событие и включить прослушку от этой клавиши. Как узнать код я уже написал в предыдущей заметке. Теперь покажу код и опишу как включается прослушка.

JAVASCRIPT:

$(function(){
  $(document).bind('keydown', function(e){
    if(e.keyCode==27){
      $('.pop-up').fadeOut('slow')
    }
  });
});

Данный код подразумевает, что вы используете на сайте одну из версий jQuery. Обертка $(function(){...}) – обязательное условие использования библиотеки jQuery. Оно предписывает браузеру дождаться пока будет загружено все дерево DOM и только потом приступит к выполнению заключенного внутри ее кода.

$(document).bind('keydown', function(e){...}) – включает прослушку на нажатие любой клавиши клавиатуры.

if(e.keyCode==27){...}- проверяет код нажатой клавиши, если он совпадает, то выполняется оператор внутри фигурных скобок. Число 27 – код клавиши ESCAPE.

$('.pop-up').fadeOut('slow') – выполняется выражение в фигурных скопках, в моем случае элемент с классом .pop-up медленно растворяется и исчезает.

При необходимости, для включения прослушки от одновременного нажатия 2-х клавиш, добавляется еще одно условие.

Вот так, за несколько минут, можно значительно повысить юзабилити вашего сайта!