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

Intro.js — это библиотека для создания интерактивных пошаговых инструкций по интерфейсу веб-приложений. Одним из ключевых аспектов работы с ней является управление фокусом пользователя на конкретных элементах страницы. Этот механизм позволяет концентрировать внимание на нужных элементах и предотвращает взаимодействие с другими частями интерфейса до завершения шага.

Выделение элементов

Intro.js использует подсветку элементов для управления фокусом. Основной принцип работы:

  1. Селектор элемента — указывается через атрибут data-intro или при динамическом создании шага через объект конфигурации.
  2. Окружение — затемнение остальной области страницы (overlay) ограничивает внимание пользователя.
  3. Фокус — библиотека автоматически вычисляет позицию и размеры элемента, создавая вокруг него рамку и всплывающую подсказку.

Пример статической разметки:

<button id="saveBtn" data-intro="Нажмите здесь для сохранения изменений.">Сохранить</button>

Для динамических шагов:

introJs().setOptions({
  steps: [
    {
      element: '#saveBtn',
      intro: 'Нажмите здесь для сохранения изменений.',
      position: 'right'
    }
  ]
}).start();

Управление блокировкой взаимодействия

По умолчанию, весь интерфейс за исключением выделенного элемента блокируется. Это достигается с помощью overlay и tooltipClass. Однако, можно управлять этим поведением через опции:

  • disableInteraction: true — полностью блокирует любые клики вне активного элемента.
  • disableInteraction: false — позволяет пользователю взаимодействовать с другими элементами.

Пример:

introJs().setOptions({
  steps: [
    {
      element: '#menu',
      intro: 'Главное меню приложения',
      disableInteraction: true
    }
  ]
}).start();

Использование disableInteraction важно для шагов, где требуется гарантировать последовательное выполнение действий.

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

Intro.js поддерживает управление с клавиатуры:

  • Tab / Shift+Tab — переход между кнопками навигации (Next, Previous).
  • Enter / Space — активация текущего шага.
  • Esc — завершение инструкции.

Для полного контроля можно использовать события библиотеки:

  • onbeforechange(targetElement) — вызывается перед сменой шага, позволяет перенастроить фокус.
  • onafterchange(targetElement) — вызывается после отображения шага, можно программно установить фокус на элемент через element.focus().

Пример:

introJs().onafterchange(function(targetElement) {
  if(targetElement.id === 'inputField') {
    targetElement.focus();
  }
}).start();

Настройка позиции и размера фокуса

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

  • Позиция подсказки — опция position: top, left, right, bottom, auto.
  • Выделение элементов с нестандартными размерами — через CSS можно задавать padding, margin и border-radius для .introjs-helperLayer.

Пример кастомизации фокуса:

.introjs-helperLayer {
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
introJs().setOptions({
  steps: [
    {
      element: '#profilePic',
      intro: 'Здесь отображается ваша фотография.',
      position: 'bottom'
    }
  ]
}).start();

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

Intro.js позволяет изменять активный элемент и шаги во время работы инструкции. Это полезно при условной логике интерфейса.

  • Метод goToStep(stepNumber).start() — перемещает фокус на конкретный шаг.
  • nextStep() и previousStep() — позволяют программно переключать шаги.

Пример:

const intro = introJs();
intro.setOptions({
  steps: [
    { element: '#step1', intro: 'Первый шаг' },
    { element: '#step2', intro: 'Второй шаг' }
  ]
});

intro.start();

// Через 3 секунды переместить фокус на второй шаг
setTimeout(() => {
  intro.goToStep(2).start();
}, 3000);

Адаптивный фокус для сложных интерфейсов

Для SPA или интерфейсов с динамическим контентом рекомендуется:

  1. Проверять наличие элемента на странице перед отображением шага (element: document.querySelector('#dynamic') || null).
  2. Использовать onbeforechange для скрытия/показа элементов.
  3. Программно прокручивать страницу к активному элементу через scrollIntoView().

Пример:

introJs().onbeforechange(function(targetElement) {
  if(targetElement.id === 'dynamicSection') {
    document.querySelector('#dynamicSection').scrollIntoView({ beh * avior: 'smooth' });
  }
}).start();

Ключевые моменты управления фокусом

  • Выделение активного элемента — главный способ концентрировать внимание пользователя.
  • Блокировка взаимодействия предотвращает случайные действия вне инструкции.
  • События библиотеки дают полный контроль над фокусом.
  • Кастомизация позиции и внешнего вида позволяет адаптировать подсказки под дизайн приложения.
  • Динамическое управление делает возможным адаптивные инструкции для интерфейсов с изменяющимся контентом.

Фокус в Intro.js — это не только визуальное выделение, но и инструмент управления поведением пользователя, который делает инструкцию интерактивной, логичной и безопасной.

Оглавление