События клавиатуры

Zepto.js предоставляет удобные средства для работы с событиями клавиатуры, упрощая обработку нажатий клавиш и реагирование на взаимодействие пользователя с элементами формы или документом в целом. Основные события, связанные с клавиатурой, включают keydown, keypress и keyup.

Отличия событий `keydown`, `keypress` и `keyup`

keydown — срабатывает при нажатии любой клавиши. Это событие генерируется сразу после нажатия, что позволяет перехватывать комбинации клавиш, включая управляющие (Ctrl, Shift, Alt).
keypress — возникает при вводе символов. Обычно используется для фильтрации вводимых символов, так как это событие не срабатывает на управляющие клавиши.
keyup — срабатывает при отпускании клавиши. Часто применяется для реализации функционала, который должен срабатывать после завершения ввода, например, динамическая проверка значения поля формы.

Все события предоставляют объект event, который содержит следующие важные свойства:

key — строковое значение клавиши ("Enter", "a", "ArrowUp").
keyCode — числовой код клавиши (устаревшее, но иногда используется для совместимости).
which — аналог keyCode, часто используется для кроссбраузерной совместимости.
altKey, ctrlKey, shiftKey, metaKey — логические значения состояния модификаторов.

Привязка событий к элементам

В Zepto обработчики событий клавиатуры привязываются через метод .on(). Пример:

$('#input').on('keydown', function(event) {
    if (event.key === 'Enter') {
        console.log('Нажата клавиша Enter');
    }
});

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

$('#input').on('keydown keyup', function(event) {
    console.log('Событие клавиатуры:', event.type, 'Клавиша:', event.key);
});

Для удобства Zepto также предоставляет методы-сокращения: .keydown(), .keypress(), .keyup(). Пример:

$('#input').keyup(function(event) {
    console.log('Отпущена клавиша', event.key);
});

Обработка комбинаций клавиш

Комбинации клавиш легко обрабатываются проверкой состояния модификаторов:

$(document).on('keydown', function(event) {
    if (event.ctrlKey && event.key === 's') {
        event.preventDefault();
        console.log('Сочетание Ctrl+S было нажато');
    }
});

Использование event.preventDefault() предотвращает стандартное действие браузера, например, сохранение страницы при Ctrl+S.

Фильтрация вводимых символов

Для ограничения ввода в текстовое поле часто используется событие keypress:

$('#numeric').on('keypress', function(event) {
    if (!/[0-9]/.test(String.fromCharCode(event.which))) {
        event.preventDefault();
    }
});

В данном примере разрешается ввод только цифр, все остальные символы блокируются.

Делегирование событий клавиатуры

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

$(document).on('keydown', 'input.dynamic', function(event) {
    if (event.key === 'Enter') {
        console.log('Enter нажата в динамическом input');
    }
});

Такой подход уменьшает количество привязанных обработчиков и повышает производительность при работе с большим количеством элементов.

Особенности работы с мобильными устройствами

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

keydown и keyup могут не срабатывать для виртуальной клавиатуры.
keypress иногда игнорируется при автозаполнении.

Для корректной работы рекомендуется использовать комбинацию input и keyup, если необходимо отслеживать изменения значений поля.

$('#input').on('input keyup', function(event) {
    console.log('Текущее значение:', $(this).val());
});