Подтвердить что ты не робот

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

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

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

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

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

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

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

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

EDIT: Я должен указать, что я уже использую e.stopPropagation() и e.preventDefault(). Основная проблема заключается в том, что иногда событие никогда не передается связанной функции. Я в основном задаюсь вопросом, кто-нибудь вычислил "более высокий" элемент для привязки к другому, чем document. Или есть альтернатива, о которой я даже не думал? Внедрение невидимого элемента Flash на странице, а затем передача всех ключей из этого в Javascript, например (я не думаю, что это сработает).

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

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

Когда вы говорите Delete, я предполагаю, что вы имеете в виду клавишу Backspace как Delete обычно ссылаетесь на клавишу рядом с Insert, Home, End, Page Up и Page Down.

Изменить для добавления:

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

Ответ 2

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

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

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

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

Ответ 3

Вы не можете привязываться к событиям, которые происходят там, где у вас нет контроля - например. окно хром. Способ, которым большинство webapps справляется с этим, просит пользователя подтвердить свое решение покинуть страницу, используя событие 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;
    }
}

Ответ 4

Абсолютно не проверенный, но... попробуйте его в элементе 'window'.