Надежная обработка сочетаний клавиш с использованием JavaScript

Каков наиболее надежный способ создания глобального обработчика сочетаний клавиш для веб-приложения с использованием JavaScript, т. е. какие события я должен обрабатывать и к чему должны быть привязаны обработчики событий?

Я хочу что-то вроде системы в Gmail, которая может обрабатывать как сочетания клавиш с одним нажатием, так и сочетания клавиш с модификаторами, например. Ctrl + B и т. д. Код должен работать как в IE 6, так и в современных браузерах.

У меня есть фреймворк Prototype, доступный для использования, но не jQuery, поэтому, пожалуйста, никаких ответов, специфичных для jQuery!


person John Topley    schedule 04.03.2009    source источник
comment
openjs.com/scripts/events/keyboard_shortcuts   -  person James    schedule 04.03.2009
comment
Я проверю - спасибо. Почему вы не написали в качестве ответа?   -  person John Topley    schedule 04.03.2009


Ответы (5)


Библиотека HotKey, доступная в пакете управления LivePipe, работает с Prototype и совместима с IE.

http://livepipe.net/extra/hotkey

person james    schedule 04.03.2009
comment
Я приму ваш ответ, потому что это похоже именно на то, что я ищу, и потому что на этом сайте есть много других интересных вещей, так что спасибо! - person John Topley; 05.03.2009
comment
Имейте в виду, HotKey, по-видимому, принимает комбинации, если нажаты неуказанные модификаторы (например, указанный ctrl + a, нажатый ctrl + shift + a, обнаружен ctrl + a). - person eyelidlessness; 06.03.2009
comment
Также было бы неплохо, если бы он обнаружил OS X и заменил ctrl на cmd/meta. - person eyelidlessness; 06.03.2009

Просто подумал, что я добавлю еще один в микс. Недавно я выпустил библиотеку под названием Mousetrap. Проверьте это на http://craig.is/killing/mice.

person Craig    schedule 11.07.2012

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

http://www.openjs.com/scripts/events/keyboard_shortcuts/

person Community    schedule 06.03.2009
comment
Я знаю, поэтому я спросил его, почему он не опубликовал это в качестве ответа. Проголосовал. - person John Topley; 06.03.2009
comment
Я знаю, поэтому я разместил это как ответ. ;) И я разместил это на вики сообщества, потому что это не мои очки для зарабатывания. - person eyelidlessness; 07.03.2009

Что бы я сделал, так это прикрепил события onKeyUp к document.body. Затем в этом обработчике событий я бы использовал метод Element.fire для запуска пользовательского события. . Хотя этот шаг является необязательным, он поможет отделить обработчик события от выполняемого действия, и вы можете использовать тот же обработчик настраиваемого события, скажем, для события нажатия кнопки.

$(document.body).observe("keyup", function() {
    if(/* key + modifier match */) {
        $(document.body).fire("myapp:mycoolevent");
    }
});

$(document.body).observe("myapp:mycoolevent", function() {
    // Handle event.
});

Позже, чтобы связать одно и то же событие с нажатием кнопки:

$(button).observe("click", function() {
    $(document.body).fire("myapp:mycoolevent");
});

Что касается обработки ключей-модификаторов, ознакомьтесь с этим ресурсом (очень старый , но все еще выглядит применимым) для получения дополнительной помощи.

person Rakesh Pai    schedule 04.03.2009
comment
Keyup кажется проблематичным. По крайней мере, в OS X (но я считаю, что это верно и для Windows, и для большинства Linux WM), большинство ключевых команд активируются при нажатии клавиши. Это ожидание (с надлежащей проверкой) также налагает определенные требования на ярлыки: клавиши-модификаторы должны быть первыми, только одна печатная клавиша на ярлык. - person eyelidlessness; 06.03.2009

Существует также новая библиотека JavaScript под названием jwerty, она проста в использовании и не зависит от jQuery.

person Dawid Woźniak    schedule 18.10.2011