Выложил библиотеку для создания клавиатурных шорткатов JavaScript Shortcuts Library (jQuery plugin). Пригодится при разработке больших веб-приложений, а также написании игр на JavaScript.
Библиотека приятна и проста в использовании. Добавляем шорткат:
$.Shortcuts.add({
type: 'down',
mask: 'Ctrl+A',
handler: function() {
debug('Ctrl+A');
}
});
Добавляем еще один:
$.Shortcuts.add({
type: 'up',
mask: 'Shift+B',
handler: function() {
debug('Shift+B');
}
});
Начинаем реагировать на шорткаты:
$.Shortcuts.start();
Поддерживаются три типа событий, по которым могут срабатывать обработчики:
down
— на нажатие клавиши или сочетания клавишup
— на отпусканиеhold
— на нажатие и удержание (обработчик будет вызван сразу после нажатия и потом будет вызываться с некоторой периодичностью пока нажата клавиша)
Строка задающая сочетание клавиш должна состоять из имен клавиш разделенных плюсами. Может быть не более одной клавиши отличной от Ctrl, Shift или Alt. Строка нечувствительна к регистру. Примеры: "Esc", "Shift+Up", "ctrl+a".
Кроме того, можно создавать несколько списков шорткатов, а затем, в зависимости от ситуации на странице, активизировать определенный список.
Добавляем шорткат в список "another":
$.Shortcuts.add({
type: 'hold',
mask: 'Shift+Up',
handler: function() {
debug('Shift+Up');
},
list: 'another'
});
Переключаемся на список шорткатов "another":
$.Shortcuts.start('another');
Также можно удалять шорткаты:
$.Shortcuts.remove({
type: 'hold',
mask: 'Shift+Up',
list: 'another'
});
Останавливаем работу шорткатов (делается unbind навешенных обработчиков событий):
$.Shortcuts.stop();
Поддерживаемые клавиши:
- Модификаторы: Ctrl, Shift, Alt
- Цифры: 0—9
- Буквы: A—Z (case-insensitive)
- Специальные клавиши: Backspace, Tab, Enter, Pause, CapsLock, Esc, Space, PageUp, PageDown, End, Home, Left, Up, Right, Down, Insert, Delete, F1—F12, ? (знак вопроса), минус, плюс
Буду рад замечаниям и предложениям по улучшению.
10 комментариев:
1. Если модуль использует jQuery, то стоит оформить его как плагин jQuery.Shorcuts, чтобы не засорять глобальную область видимости.
2. Не все используют $ вместо jQuery, поэтому имеет смысл передать глобальный объект jQuery в замыкание.
А на маках название клавиш те же?
1. Весь список поддерживаемых клавиш обязательно в описание добавить
2. "...и потом будет вызываться с некоторой периодичностью..."
с какой?
@razetdinov: Да, Азат, спасибо за замечания. Засунул все в неймспейс jQuery и сделал передачу глобального объекта jQuery через замыкание.
@Vii: К сожалению, на маке пока не проверял. По идее должно также работать. Хотя, я понимаю, что шорткаты с Ctrl на маке должны быть с Apple/Cmd key. Записал в тудушник.
@Юра: Список поддерживаемых клавиш добавил. Периодичность, с которой работает hold такая же, как у тебя в системе. Открой любой текстовый редактор, нажми какую-нибудь букву и держи. В моей библиотеке точно также работает.
Периодичность на hold не будет работать на маке. Видимо, ее надо все-таки вручную через проверки по таймауту программировать.
Какой прекрасный блог )
setList не понравился. может быть лучше сделать что-то типа:
$.shortcuts.start('another', 'other');
?
А еще может быть $.shortcuts.add('another', {
type:...
});
?
А stop есть?
@alpha: На маке в Сафари, Хроме и Опере hold работает правильно -- с периодичностью. В Firefox для hold приходит только первое нажатие. Неприятно, но пока думаю забить.
@Gomolyako Eduard: Избавился от метода setList. Теперь переключение на другой список шорткатов делается так: $.Shortcuts.start('another')
Также добавил метод $.Shortcuts.stop()
Степан, у меня есть такая проблема. Если фокус стоит не на странице браузера, а например на textarea, то шорткат не срабатывает. Как с этим справиться?
Спасибо.
@Никита
При добавлении шортката можно задать параметр enableInInput, который разрешает/запрещает выполнение шортката внутри полей ввода. По умолчанию запрещено.
Пример:
$.Shortcuts.add({
type: 'down',
mask: 'Ctrl+S',
enableInInput: true,
handler: function() {
debug('Ctrl+S');
}
});
@Степан Резников
Да, спасибо, это свойство действительно позволяет работать с textarea, но почему-то не работает с iframe.
Отправить комментарий