Управление фокусом

Bliss.js предоставляет удобный и лаконичный интерфейс для работы с DOM, включая управление фокусом на элементах. Работа с фокусом критична для создания интерактивных форм, динамических интерфейсов и доступных веб-приложений.

Выбор элементов и установка фокуса

Для установки фокуса на элемент используется метод focus():

// Выбираем элемент с id="inputField" и устанавливаем на него фокус
bliss('#inputField').focus();

Метод bliss() возвращает объект, обернутый Bliss.js, что позволяет вызывать на нем методы управления DOM напрямую. focus() можно применять как к одиночным элементам, так и к коллекциям:

bliss('input').forEach(el => el.focus());

Проверка текущего фокуса

Bliss.js упрощает проверку, находится ли элемент в фокусе:

const input = bliss('#inputField');
if (input.is(':focus')) {
    console.log('Элемент в фокусе');
}

Метод is() принимает CSS-селектор, включая псевдокласс :focus, возвращая логическое значение.

Обработка событий фокуса и потери фокуса

Bliss.js обеспечивает удобную работу с событиями focus и blur. Можно использовать метод on() для привязки обработчиков:

bliss('#inputField').on('focus', () => {
    console.log('Фокус установлен');
});

bliss('#inputField').on('blur', () => {
    console.log('Фокус потерян');
});

Для динамически создаваемых элементов применим делегированный подход через родительский контейнер:

bliss('#formContainer').on('focus', 'input', (event) => {
    console.log(`Фокус на элементе: ${event.target.name}`);
});

Управление порядком табуляции

С помощью Bliss.js можно управлять последовательностью перехода фокуса с клавиатуры. Атрибут tabindex используется для определения порядка:

bliss('#firstInput').attr('tabindex', 1);
bliss('#secondInput').attr('tabindex', 2);
bliss('#thirdInput').attr('tabindex', 3);

Значение 0 возвращает элемент в естественный порядок документа, отрицательное значение исключает элемент из цикла табуляции.

Перемещение фокуса программно

Bliss.js позволяет программно переключать фокус между элементами. Часто используется при валидации форм или динамическом создании элементов:

function moveFocusToNext(currentSelector, nextSelector) {
    const current = bliss(currentSelector);
    const next = bliss(nextSelector);
    if (current.is(':focus')) {
        next.focus();
    }
}

moveFocusToNext('#input1', '#input2');

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

const inputs = bliss('input');
inputs.forEach((el, i) => {
    el.on('keydown', (e) => {
        if (e.key === 'Enter' && inputs[i + 1]) {
            inputs[i + 1].focus();
        }
    });
});

Стилизация элементов при фокусе

Bliss.js интегрируется с классами CSS для динамического выделения элементов в фокусе:

bliss('input').on('focus', (el) => el.addClass('focused'));
bliss('input').on('blur', (el) => el.removeClass('focused'));

Использование классов позволяет отделять визуальные эффекты от логики, улучшая поддержку и читаемость кода.

Управление фокусом в модальных окнах

При работе с модальными окнами важно блокировать фокус на элементах вне модального контейнера. Bliss.js упрощает установку начального и конечного фокуса:

const modal = bliss('#modal');
modal.show();
modal.find('input:first').focus();

modal.on('keydown', (e) => {
    if (e.key === 'Tab') {
        const focusable = modal.find('input, button, select, textarea');
        const first = focusable[0];
        const last = focusable[focusable.length - 1];

        if (e.shiftKey && document.activeElement === first) {
            e.preventDefault();
            last.focus();
        } else if (!e.shiftKey && document.activeElement === last) {
            e.preventDefault();
            first.focus();
        }
    }
});

Этот подход обеспечивает доступность интерфейса и предотвращает уход фокуса за пределы модального окна.

Итоговые возможности

Bliss.js предоставляет следующие ключевые инструменты для работы с фокусом:

  • focus() и blur() для управления состоянием фокуса.
  • Проверка состояния через is(':focus').
  • Обработка событий focus и blur через on().
  • Программное управление порядком и переходом фокуса.
  • Стилизация элементов при фокусе через добавление/удаление классов.
  • Поддержка комплексных сценариев, включая модальные окна и динамические формы.

Эти возможности делают управление фокусом гибким, простым в коде и совместимым с современными стандартами веб-доступности.

Оглавление