Параметр onKeyUp

Featherlight — это легковесная библиотека для создания модальных окон на JavaScript и jQuery. Одним из удобных инструментов управления поведением модальных окон является использование событийных коллбеков. Параметр onKeyUp позволяет выполнять определённые действия при отпускании клавиши на клавиатуре, когда модальное окно активно.

Основное назначение

onKeyUp используется для привязки пользовательских функций к событию keyup, которое возникает каждый раз, когда пользователь отпускает клавишу. Этот коллбек особенно полезен для реализации:

  • Закрытия модального окна по нажатию клавиши Esc.
  • Навигации между элементами внутри модального окна с помощью стрелок.
  • Реализации кастомных сочетаний клавиш для интерактивных интерфейсов.

В Featherlight onKeyUp является опциональным параметром при инициализации модального окна.

Синтаксис

$.featherlight({
    onKeyUp: function(event) {
        // Действия при отпускании клавиши
    }
});

Параметр event содержит стандартный объект события KeyboardEvent. Через него можно получить код клавиши (event.key или event.keyCode), статус модификаторов (event.shiftKey, event.ctrlKey) и другую информацию.

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

Закрытие окна по клавише Esc

$.featherlight({
    content: '<p>Нажмите Esc для закрытия</p>',
    onKeyUp: function(event) {
        if (event.key === 'Escape') {
            this.close();
        }
    }
});

В данном примере при отпускании клавиши Esc вызывается метод close() объекта модального окна, что приводит к его закрытию.

Навигация между элементами модального окна

$.featherlight({
    content: '<ul><li>Первый</li><li>Второй</li><li>Третий</li></ul>',
    onKeyUp: function(event) {
        const items = this.$content.find('li');
        let current = items.filter('.active');
        let index = items.index(current);

        if(event.key === 'ArrowDown') {
            current.removeClass('active');
            items.eq((index + 1) % items.length).addClass('active');
        }

        if(event.key === 'ArrowUp') {
            current.removeClass('active');
            items.eq((index - 1 + items.length) % items.length).addClass('active');
        }
    }
});

В этом примере при отпускании стрелок вверх и вниз меняется активный элемент списка. Featherlight обеспечивает удобный доступ к содержимому окна через this.$content.

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

  • onKeyUp срабатывает только тогда, когда окно активно. Если несколько окон открыты одновременно, обработка событий происходит для верхнего окна.
  • Контекст this внутри функции ссылается на объект Featherlight, что позволяет использовать методы open(), close(), $content и другие свойства.
  • Событие keyup можно использовать совместно с другими коллбеками (afterOpen, beforeClose) для более сложного поведения.
  • Featherlight автоматически предотвращает конфликты с глобальными обработчиками клавиш на странице, так как событие привязывается к модальному окну.

Расширенные возможности

Параметр onKeyUp может быть динамическим, переданным при вызове метода $.featherlight() на конкретном элементе. Это позволяет создавать уникальное поведение для каждого окна:

$('#openModal').on('click', function() {
    $.featherlight('<p>Custom onKeyUp</p>', {
        onKeyUp: function(event) {
            if(event.key === 'Enter') {
                alert('Enter нажата внутри модального окна');
            }
        }
    });
});

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

Взаимодействие с другими событиями

onKeyUp может использоваться совместно с onKeyDown и onKeyPress для реализации сложной логики ввода. Например, можно отлавливать сочетания клавиш и предотвращать стандартное поведение браузера:

$.featherlight({
    onKeyUp: function(event) {
        if(event.ctrlKey && event.key === 's') {
            event.preventDefault();
            console.log('Сочетание Ctrl+S обработано в модальном окне');
        }
    }
});

event.preventDefault() предотвращает стандартное действие браузера, такое как открытие диалогового окна сохранения страницы.

Выводы по использованию

onKeyUp — мощный инструмент для создания интерактивных и управляемых модальных окон. Его преимущества:

  • Простая интеграция с объектом Featherlight.
  • Возможность управления окном через клавиатуру.
  • Полный доступ к содержимому и методам окна.
  • Гибкость для создания кастомного поведения под конкретные задачи.

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

Оглавление