Какова теория jQuery keypress, keydown, keyup black magic (на Mac)?

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

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

Я использую jQuery для создания входной формы и вставки ее в свой документ. Он работает отлично, в основном. Я хочу, чтобы форма реагировала на клавиатуру, как и большинство других форм ввода, которые я вижу там: клавиша esc должна отклонить форму так же, как нажать кнопку отмены, и потому что форма имеет <textarea> на ней, cmd + enter должен совпадать с нажатием кнопки OK. Кажется достаточно простым, чтобы использовать событие keypress. Проблема в том, что Chrome не вызывает мой обработчик нажатия клавиши esc или cmd + enter. Он запускается для ctrl + enter и option + enter и для буквенно-цифровых символов, но не cmd + enter.

Итак, вместо этого я буду использовать keyup. Я получаю keyup для esc и keyup для cmd и keyup для enter, отлично. Но я не получаю keyup для ключа enter, пока я удерживаю cmd.

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

Ответы

Ответ 1

Keypress:

Событие нажатия клавиши отправляется элементу, когда регистры браузера ввод клавиатуры. Это похоже на событие keydown, , за исключением случай повторений клавиш. Если пользователь нажимает и удерживает клавишу, событие срабатывает один раз, но запускаются отдельные события нажатия клавиш для каждого вставленного символа. Кроме того, клавиши-модификаторы (например, Shift), но не вызывает нажатия клавиш.

Keydown:

Событие keydown отправляется элементу, когда пользователь сначала нажимает кнопку на клавиатуре. Он может быть прикреплен к любому элементу, но событие отправляется только элементу, в котором имеет фокус. Фокусируемые элементы могут варьируются между браузерами, но элементы формы всегда могут получить фокус, поэтому разумные кандидаты на этот тип события.

Keyup:

Событие keyup отправляется элементу, когда пользователь выпускает ключ на клавиатура. Он может быть прикреплен к любому элементу, но событие только отправляется элементу, в котором имеет фокус. Фокусируемые элементы могут между браузерами, но элементы формы всегда могут разумные кандидаты на этот тип события.

Кроме того, это удобная часть информации, которая обычно затушевывается:

Если нажатия клавиш в любом месте должны быть пойманы (например, для реализации глобальные сочетания клавиш на странице), полезно приложить это поведение к объекту документа. Из-за пузырьков событий все нажатия клавиш отправятся в DOM до объекта документа, если только явно остановлен.

Чтобы определить, какой символ был введен, просмотрите объект события который передается функции обработчика. В то время как браузеры используют разные свойства для хранения этой информации, jQuery нормализует .whichчтобы вы могли надежно использовать его для получения кода символа.

Обратите внимание, что keydown и keyup предоставляют код, указывающий, какой ключ нажатие, а нажатие клавиши указывает, какой символ был введен.. Например, нижний регистр "a" будет отображаться как 65 с помощью keydown и keyup, но как 97 нажатием клавиши. В верхнем регистре "А" сообщается как 65 Мероприятия. Из-за этого различия при ловле специальных нажатий клавиш такие как клавиши со стрелками,.keydown() или .keyup() - лучший выбор.

Дополнительная информация о кнопке cmd для MAC-адресов: jQuery key code для командной строки

Ответ 2

Эта статья является хорошим ресурсом, объясняющим различия между keyup, keydown и keypress.

Короткий ответ: нет простого способа справиться с ними, кроме как для учета разных браузеров.

То, как я лично обрабатываю его в загрузочном плагине, который я написал, заключается в создании настраиваемого метода для проверки того, какое событие поддерживается. Кстати, очень похожий метод появился в официальной версии Bootstrap немного позже: P

//------------------------------------------------------------------
//
//  Check if an event is supported by the browser eg. 'keypress'
//  * This was included to handle the "exhaustive deprecation" of jQuery.browser in jQuery 1.8
//
eventSupported: function(eventName) {         
    var isSupported = (eventName in this.$element);

    if (!isSupported) {
      this.$element.setAttribute(eventName, 'return;');
      isSupported = typeof this.$element[eventName] === 'function';
    }

    return isSupported;
}

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

if (this.eventSupported('keydown')) {
  this.$element.on('keydown', $.proxy(this.keypress, this));
}

Ответ 3

Вы должны помнить, что при проверке KeyboardEvent на макете ключ ⌘ не будет выбран как event.ctrlKey, а скорее event.metaKey. Дополнительная документация доступна на MDN.

Не видя кода, моя ставка заключается в том, что это причина, по которой ⌘+Enter не подбирается.