На этом шаге мы рассмотрим создание обработчика нажатия клавиш.
Нашему переключателю стилей мы можем также добавить возможность реагировать на комбинации горячих клавиш. Когда пользователь будет вводить первый символ отображаемого названия стиля, мы заставим страницу вести себя так, как если бы был выполнен щелчок на соответствующей кнопке. Для реализации этой особенности нам необходимо познакомиться с событиями клавиатуры, которые ведут себя несколько иначе, чем события мыши.
Существует два типа событий клавиатуры: те, что являются реакцией непосредственно на действия с клавиатурой (keyup и keydown), и те, что являются реакцией на ввод текста (keypress). Один символ может быть результатом нажатия нескольких клавиш, например одновременное нажатие клавиши Shift и клавиши X выводит заглавный символ X. Несмотря на то, что в каждом браузере работа с клавиатурой реализована по-разному (что совсем не удивительно), можно уверенно следовать следующему правилу: если требуется узнать, какая клавиша была нажата, необходимо использовать событие keyup или keydown; если требуется узнать, какой символ появится на экране, необходимо использовать событие keypress. Для рассматриваемого случая нам достаточно знать, какая из трех клавиш, J (русская буква О), C или E, была нажата, поэтому мы будем использовать событие keyup.
Далее нам необходимо определить, какой элемент должен реагировать на событие. Это не так очевидно, как в случае событий мыши, когда имеется курсор, явно указывающий на требуемый элемент. В случае события клавиатуры его обработкой должен заниматься элемент, который в момент события обладает фокусом ввода. Перемещение фокуса ввода между элементами может выполняться несколькими способами, включая щелчки мышью и нажатия на клавишу табуляции. Не все элементы способны принять фокус ввода, а только те, для которых определена реакция по умолчанию на события клавиатуры, например поля форм, ссылки и элементы, обладающие свойством .tabIndex.
В данном случае нас, вообще говоря, не волнует, какой элемент обладает фокусом ввода; нам лишь требуется, чтобы наш переключатель выполнял соответствующие действия, когда пользователь нажимает одну из клавиш. Здесь нам на помощь снова приходит механизм всплытия событий, благодаря которому мы можем присоединить наш обработчик события keyup к элементу document и пребывать в уверенности, что любое событие клавиатуры достигнет его.
Наконец, в обработчике события keyup нам необходимо определить, какая клавиша была нажата. Для этого мы воспользуемся объектом события. Свойство .keyCode события содержит идентификатор нажатой клавиши, причем для алфавитных клавиш он представляет собой символ ASCII в верхнем регистре. Благодаря этому мы можем определять полученное значение и вызывать соответствующий обработчик щелчка мышью:
$(document).keyup(function(event) {
switch (String.fromCharCode(event.keyCode)) {
case 'J': //Обычный
$('#switcher-default').click();
break;
case 'C': //Суженный
$('#switcher-narrow').click();
break;
case 'E': //Увеличенный
$('#switcher-large').click();
break;
}
});
Рис.1. Обработка нажатия клавиш на клавиатуре
Полный текст этого примера можно взять здесь.Теперь нажатие одной из трех указанных клавиш будет имитировать щелчок мышью на соответствующей кнопке, при условии, что события клавиатуры не перехватываются такими механизмами, как механизм "поиска по мере ввода", присутствующий в браузере Firefox.
На следующем шаге мы закончим изучение этого вопроса.
