27.01.2010

JavaScript Shortcuts Library

Выложил библиотеку для создания клавиатурных шорткатов 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();

Поддерживаются три типа событий, по которым могут срабатывать обработчики:

  1. down — на нажатие клавиши или сочетания клавиш
  2. up — на отпускание
  3. 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 комментариев:

razetdinov комментирует...

1. Если модуль использует jQuery, то стоит оформить его как плагин jQuery.Shorcuts, чтобы не засорять глобальную область видимости.

2. Не все используют $ вместо jQuery, поэтому имеет смысл передать глобальный объект jQuery в замыкание.

Vii комментирует...

А на маках название клавиш те же?

Юра комментирует...

1. Весь список поддерживаемых клавиш обязательно в описание добавить

2. "...и потом будет вызываться с некоторой периодичностью..."
с какой?

Степан Резников комментирует...

@razetdinov: Да, Азат, спасибо за замечания. Засунул все в неймспейс jQuery и сделал передачу глобального объекта jQuery через замыкание.

@Vii: К сожалению, на маке пока не проверял. По идее должно также работать. Хотя, я понимаю, что шорткаты с Ctrl на маке должны быть с Apple/Cmd key. Записал в тудушник.

@Юра: Список поддерживаемых клавиш добавил. Периодичность, с которой работает hold такая же, как у тебя в системе. Открой любой текстовый редактор, нажми какую-нибудь букву и держи. В моей библиотеке точно также работает.

alpha комментирует...

Периодичность на hold не будет работать на маке. Видимо, ее надо все-таки вручную через проверки по таймауту программировать.

Gomolyako Eduard комментирует...

Какой прекрасный блог )

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');
}
});

dudkaman комментирует...

@Степан Резников
Да, спасибо, это свойство действительно позволяет работать с textarea, но почему-то не работает с iframe.