Какова теория нажатия клавиш jQuery, нажатия клавиш, черной магии клавиш (на Mac)?

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

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

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

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

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


macos jquery keypress keydown keyup
person SaganRitual    schedule 10.10.2012    source источник
comment
Не реальный вопрос? У меня были такие же сомнения по поводу трио, и я понятия не имел, что у меня есть нереальный вопрос. Ну, по крайней мере, теперь у меня есть лучшее представление о том, на что следует обратить внимание в следующий раз, когда я захочу (не) проголосовать за кандидата.   -  person Majid Fouladpour    schedule 02.02.2015

Ответы (3)


arrow_upward
90
arrow_downward

Нажатие клавиши:

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

Keydown:

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

Keyup:

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

Кроме того, это полезная информация, которую обычно замалчивают:

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

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

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

Дополнительная информация о ключе cmd на MAC-адресах: код ключа jQuery для командного ключа

person Chase    schedule 10.10.2012
comment
Спасибо @Chase за то, что разъяснили мне это! - person Preeti Maurya; 02.07.2015
comment
@PreetiMaurya - Рад, что помог! :D - person Chase; 02.07.2015
comment
Также можно просмотреть эту прекрасную статью, чтобы понять unixpapa.com/js/key.html. - person Suraj Jain; 31.08.2017

arrow_upward
5
arrow_downward

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

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

Как я лично обрабатываю это в плагине Bootstrap, который я написал, я создаю пользовательский метод для проверки того, какое событие поддерживается. По совпадению, очень похожий метод появился в официальной версии 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));
}
person Terry    schedule 10.10.2012

arrow_upward
1
arrow_downward

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

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

person Oleg    schedule 11.10.2012