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

Umbrella JS предоставляет удобный и компактный синтаксис для работы с событиями клавиатуры, позволяя обрабатывать пользовательский ввод без необходимости писать громоздкий нативный JavaScript. Основные события клавиатуры — это keydown, keyup и keypress. Каждый из них имеет свои особенности и применяется в разных сценариях.

keydown и keyup

Событие keydown срабатывает при нажатии любой клавиши на клавиатуре, независимо от того, является ли это символом или функциональной клавишей (Shift, Ctrl, Arrow и т.д.). keyup срабатывает при отпускании клавиши.

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

u('#inputField').on('keydown', function(event) {
    console.log('Нажата клавиша:', event.key);
});

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

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

  • event.key — отображает символ нажатой клавиши, например "a" или "Enter".
  • event.code — код физической клавиши, например "KeyA" или "ArrowUp".
  • event.ctrlKey, event.shiftKey, event.altKey, event.metaKey — булевы значения, показывающие, была ли зажата соответствующая модификаторная клавиша.

keypress и его особенности

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

u('#inputField').on('keypress', function(event) {
    console.log('Введён символ:', String.fromCharCode(event.charCode));
});

event.charCode возвращает числовое значение символа, что позволяет фильтровать ввод, например, разрешая только цифры:

u('#inputField').on('keypress', function(event) {
    if (event.charCode < 48 || event.charCode > 57) {
        event.preventDefault(); // блокируем ввод нецифровых символов
    }
});

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

Umbrella JS позволяет использовать делегирование событий с помощью метода .on(). Это особенно удобно, когда элементы создаются динамически.

Пример:

u('body').on('keydown', 'input.dynamic', function(event) {
    console.log('Динамический input получил нажатие:', event.key);
});

В этом случае обработчик применяется ко всем текущим и будущим элементам с классом dynamic, находящимся внутри <body>.

Сочетания клавиш и модификаторы

События клавиатуры часто используют вместе с модификаторами для реализации горячих клавиш:

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

Можно комбинировать несколько модификаторов, проверяя event.shiftKey и event.altKey. Umbrella JS не требует дополнительных утилит для этого, достаточно стандартного объекта события.

Методы .off() и управление событиями

Umbrella JS предоставляет метод .off() для удаления обработчиков:

function logKey(event) {
    console.log(event.key);
}

u('#inputField').on('keydown', logKey);

// Позже можно снять обработчик
u('#inputField').off('keydown', logKey);

Если аргумент функции не указан, все обработчики данного типа удаляются:

u('#inputField').off('keydown');

Это удобно для управления динамическими формами и очистки ресурсов при удалении элементов со страницы.

Особенности работы с формами

При работе с формами важно учитывать стандартное поведение клавиш, таких как Enter или Tab. Для предотвращения стандартного действия можно использовать event.preventDefault():

u('#formInput').on('keydown', function(event) {
    if (event.key === 'Enter') {
        event.preventDefault();
        console.log('Форма не отправлена, обработка Enter вручную');
    }
});

Вспомогательные методы для удобства

Umbrella JS интегрируется с другими методами библиотеки. Например, можно комбинировать обработку клавиатуры с манипуляциями DOM:

u('#inputField').on('keyup', function(event) {
    u('#display').text(`Нажата клавиша: ${event.key}`);
});

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

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

Оглавление