Обработка нажатия клавиш в jQuery: событие keypress и Enter

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

Свойство event.which в обработчике события keypress позволяет определить код символа нажатой клавиши. Воспользуйтесь функцией String.fromCharCode, чтобы преобразовать этот код в символ.

Пример кода:

$(document).keypress(function(event) {
    console.log('Нажали клавишу: ' + String.fromCharCode(event.which));
});

Добавим, что есть свойство event.key, демонстрирующее значение нажатой клавиши без дополнительного преобразования.

Внимательный осмотр: события keypress

События keypress неотъемлемо важны для интерактивности веб-приложений. Всё становится понятнее, как только вы выясните тонкости обработки событий клавиатуры и обеспечите кроссбраузерную совместимость.

Зачем весь этот разговор о event.which?

Вкратце, event.which — это простой и надёжный метод, применяемый в jQuery для идентификации нажатых клавиш в различных браузерах. Он позволяет получать код символа однообразно для всех типов символов.

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

Большой брат event.keyCode

Хотя event.keyCode считается устаревшим, он может пригодиться при работе со старыми версиями браузеров. Будьте готовы использовать его в качестве запасного варианта.

Пример использования

Представим, что вы хотите выполнить конкретное действие при нажатии клавиши Enter (код 13):

$(document).keypress(function(event) {
    if (event.which === 13) {
        console.log('Нажата клавиша Enter, загадайте желание! 🌠');
    }
});

Если желаете улучшить читаемость кода, используйте константу $.ui.keyCode из jQuery UI для замены кода клавиши Enter на $.ui.keyCode.ENTER.

Продвинутые настройки и манипуляции

Осмотрим более подробно настройку обработки нажатий и ситуации, когда следует модифицировать стандартное поведение.

Отмена действия по умолчанию с event.preventDefault()

Если требуется отменить стандартное действие, применяйте event.preventDefault():

$(document).keypress(function(event) {
    if (event.which === 13) {
        event.preventDefault();
        console.log('Нажата клавиша Enter, но действие приостановлено 💥');
    }
});

Управление действиями для различных клавиш

Метод bind в jQuery даёт возможность привязывать разные действия к разным клавишам:

$(document).bind('keypress', function(event) {
    if (event.which === 13) {
        console.log('Enter активирован. Что следует дальше?')
    }
});

Реакция на ввод в интерактивных элементах

Вводите функции обратного вызова для обработки нажатий на конкретные клавиши в полях ввода:

$('#myInput').keypress(function(event) {
    if (event.which === 13) {
        doSomethingWith(this.value);
        console.log('Принято значение ' + this.value + '. Работаем!');
    }
});

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

Визуализируем процесс определения нажатой клавиши так:

Событие Keypress 🔍 -> Определение кода нажатой клавиши 🕵️‍♀️ -> Клавиша идентифицирована 🔎

Пример кода:

$(document).keypress(function(event) {
    var keyPressed = event.which; // 🔍
    var keyChar = String.fromCharCode(keyPressed); // 🔎
    alert("Нажата клавиша '" + keyChar + "'! 🕵️‍♀️");
});

Особые случаи: крайности, имитации и прочие!

Работа со событиями ключает в себя встречу с непредсказуемыми ситуациями.

Тестирование кроссбраузерной совместимости

Проверьте, как события keypress ведут себя в разных браузерах и на разных устройствах. Это представляет важность для адаптивного дизайна и доступности.

Имитация нажатий клавиш

Для имитации нажатия клавиш можно использовать плагин jquery.simulate.js из библиотеки jQuery UI:

// Имитация нажатия клавиши Enter
$('.myInputField').simulate('keypress', { keyCode: $.ui.keyCode.ENTER });

Дополнительные свойства объекта события

В объекте события e доступны также свойства e.altKey, e.ctrlKey и e.shiftKey, что дает возможность работать с комбинациями клавиш. Всегда изучайте объект e, он может содержать полезные детали.

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

1. Документация по событию keypress от jQuery API
2. Инструмент для определения кодов клавиш в JavaScript от Toptal®
3. Свойство key объекта KeyboardEvent на MDN
4. Свойство keyCode объекта KeyboardEvent на w3schools
5. Основы событий в jQuery на портале jQuery Learning Center
6. Свежие вопросы по теме 'keypress' на Stack Overflow