Обработка нажатия клавиши Enter с помощью jQuery

Быстрый ответ

Для определения нажатия клавиши Enter в jQuery используйте метод .keypress(), а затем в условном операторе проверьте event.which === 13. Вот так это выглядит на практике:

$(selector).keypress(function(event) {
    if (event.which === 13) {
        // Была нажата клавиша Enter!
        alert('Вы нажали Enter!');
    }
});

В таком случае выполнение заданного блока кода произойдёт в момент нажатия клавиши Enter в рамках обработки события keypress, отслеживаемого у выбранного элемента.

Лучшие практики и практические советы

Обеспечиваем кросс-браузерную совместимость

Метод .keypress() в сочетании с проверкой event.which гарантирует стандартизированное поведение в различных браузерах, но с целью поддержки устаревших версий следует также использовать .keydown():

$(selector).keydown(function(event) {
    if (event.which === 13 || event.keyCode === 13) {
        // Включена поддержка обратной совместимости!
        alert('Нажата клавиша Enter!');
    }
});

Подробнее об этом расскажет наш спикер на видео

Ограничиваем область сработки слушателя событий

Событие keypress можно применять как глобально к $(document), так и к конкретному элементу внутри контекста, например при работе с формами:

$('#inputField').keypress(function(event) {
    if (event.which === 13) {
        // На данном этапе видно: зарегистрировано нажатие клавиши Enter на #inputField!
    }
});

Создание собственных методов jQuery

Для большего удобства и наглядности работы вы можете расширить функционал jQuery, создав свой метод, например, $.fn.enterKey, для ясной и строгой регистрации нажатия клавиши Enter:

$.fn.enterKey = function(callback) {
    return this.each(function() {
        $(this).keypress(function(e) {
            if (e.which === 13) {
                callback.call(this, e);
                // Под заказ: обработка события нажатия клавиши Enter.
            }
        });
    });
};

// Применение созданного вами метода к полю ввода
$("#inputField").enterKey(function() {
    alert('Enter был нажат именно на элементе #inputField!');
});

Оптимизируем производительность при многократных нажатиях

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

$('#inputField').keypress(_.debounce(function(event) {
    if (event.which === 13) {
        // Тут отслеживается частота нажатия клавиши Enter!
    }
}, 200));

Визуализация

Возможно, следующий образ поможет лучше представить себе обработку события нажатия клавиши Enter. Допустим, это команда для вашего домашнего питомца – собаки 🐶:

$(document).on('keypress', function(e) {
  if(e.which == 13) {
    alert('Собака гавкает: нажата клавиша Enter!');
  }
});

Получается вот так:

Клавиатура (🎹): [A, B, C, ..., Enter, ... Z]
Вы нажимаете (🎵): Enter
Реакция вашего кода (🐶): Приступили к выполнению! 🎉

Просто нажмите клавишу Enter и увидите, как ваш код отреагирует на это!

Учтите крайние случаи и факторы доступности

Не забываем о доступности

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

Разница между Keydown и Keypress

Событие Keydown фиксирует момент нажатия клавиши, keypress — её активизацию. Выбор между ними будет зависеть от желаемого пользовательского опыта.

Правильно обрабатываем модификаторы клавиш

Делайте так, чтобы ваш скрипт учитывал нажатие клавиши Enter в сочетании с модификаторами (например, Shift, Ctrl, Alt). Соответствующую реакцию можно расписать в обработчике событий:

$(selector).keypress(function(event) {
    var isShiftPressed = event.shiftKey;
    if (event.which === 13 && isShiftPressed) {
        // Нажата комбинация Shift+Enter!
    }
});

Полезные материалы

1. Событие keypress | jQuery API Documentation — Полноценное руководство по событию keypress в документации jQuery.
2. KeyboardEvent – Web APIs | MDN — MDN предоставляет информацию о событиях, связанных с клавиатурой.
3. .on() | jQuery API Documentation — Метод .on() и вся важная информация о нем на официальном сайте jQuery.
4. javascript – jQuery Event Keypress: Какая клавиша была нажата? – Stack Overflow — Обсуждение как отслеживать нажатие конкретной клавиши с помощью jQuery на Stack Overflow.
5. Коды символов JavaScript (Коды клавиш) – Cambia Research — Перечень кодов символов JavaScript и клавиш.
6. Объяснение Debouncing и Throttling на примерах | CSS-Tricks — Понятное и доступное объяснение принципов debouncing и throttling на сайте CSS-Tricks.