Лучший способ захватить все ключевые события для веб-приложения?

Question

Я немного расстроен текущим состоянием захвата ключей для веб-приложений.Это прекрасно работает, если вы знаете, что ваш пользователь будет печатать в определенном месте (например, поле input), но как только вы захотите сделать глобальные ярлыки для всего «приложения», оно, кажется, развалится,

Я пытаюсь выяснить, существует ли лучший способ для захвата всех ключевых событий для веб-страницы, чем метод, который я использую в настоящее время.

МойТекущий метод заключается в использовании плагина JQuery Hotkeys , привязанного к элементу document, то есть:

$(document).bind("keyup", "delete", function() {});

, который прекрасно работает для большинства целей, но, например, в Firefox, еслислучается, что пользователь рассеянно наводит указатель мыши на панель навигации, иногда клавиша удаления приводит к тому, что пользователь возвращается назад, а обработчик никогда не получает ключ, так что я могу остановить распространение.

Есть лидругой элемент, к которому я должен привязываться?Есть ли лучший плагин для этого?Должен ли я просто избегать использования каких-либо ключей, привязанных к вещам, в обычных веб-браузерах?

Поскольку все больше и больше веб-приложений пытаются подражать своим коллегам на рабочем столе, создается впечатление, что это базовая функция, которая все больше будет требоваться веб-разработчикам.

РЕДАКТИРОВАТЬ: Я должен указать, что я уже использую e.stopPropagation() и e.preventDefault().Основная проблема заключается в том, что иногда событие даже не передается связанной функции.Мне в основном интересно, нашел ли кто-нибудь «более высокий» элемент для привязки, кроме document.Или есть альтернатива, о которой я даже не задумывался?Например, встраивание невидимого элемента Flash на страницу и последующую передачу всех ключей от него в Javascript (я не думаю, что это сработает).

Думаю, на данный момент я делаю что-то "стандартный, общеизвестный способ. "Я пытаюсь выяснить, существует ли какой-то нестандартный способ, о котором мало кто знает, может быть, кто-то в SO знает о: -).

Answer 1

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

Привязка слушателей keypress и keydown к document является правильным способом сделать это, но вы должны помнить preventDefault и / или stopPropogation для нажатий клавиш, которые вы хотите переопределить. Даже если поведение по умолчанию отсутствует, вам нужно будет запретить их каскадное переключение в случае, если пользователь восстановил свои комбинации клавиш по умолчанию.

Кроме того, вы сможете получать ввод с клавиатуры только тогда, когда страница находится в фокусе.

Когда вы говорите Удалить Я предполагаю, что вы имеете в виду клавишу Backspace как Удалить , как правило, относится к клавише рядом с Вставить , Дом , Конец , Page Up и Page Down .

Изменить, чтобы добавить:

Будьте очень осторожны о том, какие клавиши вы хотите переопределить. Если вы создаете приложение, которое будет использоваться людьми, отличными от вас, вам нужно беспокоиться о удобстве использования и доступности. Переопределение клавиш Tab , Пробел и Enter опасно, особенно для людей, использующих программы чтения с экрана. Обязательно протестируйте сайт как слепой и исправьте все проблемы, которые могут возникнуть при перемещении страницы по клавиатуре.

Answer 2

возможно, вы можете использовать html-атрибут ACCESSKEY и реагировать на фокус. i.e.:

<input type="text" size="40" value="somefield" accesskey="F">

Я думаю, вам может понадобиться добавить tabindex к тегам типа <div>

<div id="foo" tabindex="1" accesskey="F">

Answer 3

Вы не можете связывать события, которые происходят, когда у вас нет контроля - например, окно Chrome.Большинство веб-приложений решают эту проблему, предлагая пользователю подтвердить свое решение покинуть страницу, используя событие onbeforeunload:

window.onbeforeunload = function (e) {
    var str = 'Are you sure you want to leave this page?';
    e = e || window.event;

    if (userHasSomeUnsavedWork) {
        e.returnValue = str;
        return str;
    }
}

• onbeforeunload - MDC

Answer 4

Абсолютно не проверено, но ... попробуйте на элементе "окна".