Эмуляция сочетаний клавиш Google

Question

Мне действительно любопытно, как Google (а теперь и Facebook в фотогалереях) реализовал сочетания клавиш, такие как J / K или ← / → стрелки. Боюсь, у меня не так много деталей, потому что я не могу выяснить, проверив источник, какая часть делает эти кнопки «тиками», так сказать. Что я специально ищу, так это способ привязки кнопок к функциям Javascript - оттуда это довольно просто.

Answer 1

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

Поскольку разные браузеры обрабатывают события по-разному (я смотрю на Internet Explorer), я обычно использую уровень абстракции, такой как YUI или jQuery, для нормализации различий.

В YUI есть пример реализации управления с клавиатуры , как и jQuery (хотя этот пример не прикрепляется к объекту документа).

Если вы хотите выяснить, какие коды клавиш относятся к каким клавишам, то я считаю, что проще всего использовать Firebug .

Запустите следующий код в консоли:

document.onkeydown = function (ev) { console.log(ev); }

& hellip; затем нажмите на страницу и нажмите клавиши. Объекты, напечатанные на консоли, сообщат вам, какой код клавиши вы только что сработали.

Answer 2

Я бы рекомендовал использовать js-hotkeys ( jQuery плагин).

Я использовал этот плагин ранее в производственной среде, поэтому я протестировал его во всех браузерах класса, прежде чем внедрить его. Это было около трех месяцев назад.