Как реализовать gmail-подобные горячие клавиши

Question

Я хотел бы реализовать горячие клавиши клавиатуры в веб-приложении.До сих пор я использовал плагин jquery.hotkeys , и это позволило мне реализовать простые горячие клавиши (например, одиночные нажатия клавиш, такие как a ).

Теперь для поддержкиДля более сложной навигации с помощью клавиатуры, я бы хотел реализовать «многоключевые» горячие клавиши, такие как в gmail, где, например, нажмите g (для «go»), а затем i (для «Входящие») принимает вас входящие.

Кто-нибудь знает о компоненте javascript (плагин jquery или аналогичный) для этой задачи?Или какой будет хороший подход для реализации таких горячих клавиш?

Answer 1

Есть лучшее решение для этого, используя keymaster с плагином keymaster-sequence .

Источники здесь keymaster.js издесь keymaster.sequence.js

Используйте их так:

<script type="text/javascript" src="https://raw.github.com/madrobby/keymaster/master/keymaster.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/chevalric/keymaster-sequence/master/keymaster.sequence.min.js"></script>
<script>
key.sequence(["g","i"], function () {
  var el = document.getElementById("result");
  el.innerHTML = "You first pressed 'g', then you pressed 'i'";
});

</script>
<div id="result"></div>

Вот небольшая демонстрация http://jsfiddle.net/Nwdyd/1/, которая также показывает обработку столкновений (привязка gа также g i)

Answer 2

Установите глобальное логическое значение при нажатии g . Затем проверьте, установлен ли он при нажатии i . При желании вы можете ввести тайм-аут при нажатии g , чтобы у вас было ограниченное время для нажатия i впоследствии.

var goPressed = false;
function hotkeyPressed (event) {
    if (event.keyCode == KEYCODE_FOR_G) {
        goPressed == true;
        //Optionally:
        setTimeout(clearPresses, 3000);
    }
    if (event.keyCode == KEYCODE_FOR_I && goPressed) {
        gotoInbox();
    }
}

function clearPresses() {
    goPressed = false;
}

Answer 3

Вы по-прежнему можете использовать плагин, добавив состояние и время ожидания, как предлагает Мэтт Феллоуз .

var gWasPressed = false;    

var clearKeyState = function() {
    gWasPressed = false;
}

var changeKeyState = function() {
  gWasPressed = true;
  setTimeout(clearKeyState, 3000);
}

$(document).bind('keydown', 'g', changeKeyState);
$(document).bind('keydown', 'i', commandI);

var commandI = function() {
  if (gWasPressed) {
    // go to inbox
    clearKeyState();
  } else {
    // do whatever i was supposed to do if g wasn't pressed
  }
}

Альтернативным решением будет повторное связывание ключей, когда Нажмите g и открепите их, когда истечет время ожидания или когда нажата дополнительная клавиша i .

Answer 4

Существует новая версия hotKeys.js, которая работает с 1.10+ версией jQuery.Это небольшой, 100-строчный файл javascript.4 КБ или просто 2 КБ.Вот несколько простых примеров использования:

$('#myBody').hotKey({ key: 'c', modifier: 'alt' }, doSomething);

$('#myBody').hotKey({ key: 'f4' }, doSomethingElse);

$('#myBody').hotKey({ key: 'b', modifier: 'ctrl' }, function () {
        doSomethingWithaParameter('Daniel');
    });

$('#myBody').hotKey({ key: 'd', modifier :'shift' }, doSomethingCool);

Клонируйте репозиторий из github: https://github.com/realdanielbyrne/HoyKeys.git или перейдите на страницу репозитория github https://github.com/realdanielbyrne/HoyKeys или раскошелиться.