onKeyUp

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

Основы использования onKeyUp

Событие onKeyUp в Featherlight срабатывает каждый раз, когда пользователь отпускает клавишу, находясь в пределах модального окна. Оно регистрируется при инициализации окна и передаёт объект события event, содержащий информацию о клавише, которая была отпущена.

Простейший пример:

$.featherlight('<p>Пример контента</p>', {
    onKeyUp: function(event) {
        console.log('Клавиша отпущена:', event.key);
    }
});

В этом примере при каждом отпускании клавиши в консоль выводится её название. Объект event поддерживает стандартные свойства Jav * aScript:

  • event.key — строковое представление клавиши ("Escape", "Enter", "ArrowUp" и т.д.).
  • event.keyCode — числовой код клавиши (устаревший, но иногда используется для совместимости).
  • event.altKey, event.ctrlKey, event.shiftKey — булевы значения, указывающие на зажатие модификаторов.

Закрытие модального окна с клавиши Escape

Одним из стандартных сценариев является закрытие окна при нажатии клавиши Escape. Featherlight упрощает этот процесс через onKeyUp:

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

Ключевые моменты:

  • this внутри функции ссылается на текущий экземпляр Featherlight.
  • Метод close() закрывает окно и удаляет все обработчики событий, назначенные модалкой.

Навигация по контенту с клавиатуры

onKeyUp удобно использовать для реализации навигации, например, между изображениями в галерее:

$.featherlight('<img src="image1.jpg">', {
    onKeyUp: function(event) {
        switch(event.key) {
            case 'ArrowRight':
                this.$content.find('img').attr('src', 'image2.jpg');
                break;
            case 'ArrowLeft':
                this.$content.find('img').attr('src', 'image0.jpg');
                break;
        }
    }
});

Особенности:

  • this.$content — jQuery-объект содержимого окна.
  • Можно комбинировать с условиями на модификаторы (Ctrl, Shift) для более сложного поведения.

Динамическое назначение onKeyUp

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

var fl = $.featherlight('<p>Первый контент</p>');

fl.onKe yUp = function(event) {
    if (event.key === 'Enter') {
        this.$content.html('<p>Контент обновлён</p>');
    }
};

После установки нового обработчика модалка будет реагировать на клавишу Enter, заменяя содержимое.

Комбинирование с другими событиями Featherlight

onKeyUp часто используется вместе с afterOpen и beforeClose для более гибкой логики:

$.featherlight('<p>Комбинированный пример</p>', {
    afterOpen: function() {
        console.log('Окно открыто');
    },
    onKeyUp: function(event) {
        if(event.key === "Escape") {
            this.close();
        }
    },
    beforeClose: function() {
        console.log('Окно закрывается');
    }
});

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

Особенности и рекомендации

  • Featherlight привязывает onKeyUp только к элементу модального окна, что предотвращает случайное срабатывание на других элементах страницы.
  • Для поддержки мобильных устройств стоит учитывать, что физической клавиатуры может не быть, и onKeyUp может не сработать.
  • Всегда проверять event.key вместо event.keyCode для современного кроссбраузерного подхода.
  • Можно отключать стандартное поведение браузера через event.preventDefault() при необходимости, например, при кастомной навигации стрелками.

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

Оглавление