Настройка клавиатурных сокращений

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

Подключение и инициализация

Для начала необходимо подключить Intro.js к проекту:

<link rel="stylesheet" href="introjs.min.css">
<script src="intro.min.js"></script>

Инициализация производится через объект Intro.js:

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

Встроенные клавиши

По умолчанию Intro.js поддерживает следующие клавиши:

  • Esc — завершение текущего интерактивного руководства.
  • ArrowRight / Enter — переход к следующему шагу.
  • ArrowLeft — возврат к предыдущему шагу.

Эти действия можно отключить или изменить через опцию keyboardNavigation и события onkeydown.

intro.setOptions({
    keyboardNavigation: false // Отключение стандартной навигации
});

Добавление собственных сочетаний клавиш

Для реализации кастомных комбинаций используется обработчик события keydown на объекте document. Важно предотвращать конфликт с встроенными клавишами и другими элементами страницы.

document.addEventListener('keydown', function(event) {
    switch (event.code) {
        case 'KeyN': // N — перейти к следующему шагу
            intro.nextStep();
            event.preventDefault();
            break;
        case 'KeyP': // P — вернуться к предыдущему шагу
            intro.previousStep();
            event.preventDefault();
            break;
        case 'KeyQ': // Q — завершить интро
            intro.exit();
            event.preventDefault();
            break;
    }
});

Привязка к отдельным шагам

Иногда требуется, чтобы клавиатурные сочетания действовали только на определённом шаге. Intro.js предоставляет событие onchange, которое срабатывает при переходе на новый шаг:

intro.onchange(function(targetElement) {
    const stepId = intro._currentStep;
    if (stepId === 1) {
        document.addEventListener('keydown', handleStepTwoKeys);
    } else {
        document.removeEventListener('keydown', handleStepTwoKeys);
    }
});

function handleStepTwoKeys(event) {
    if (event.code === 'Space') {
        intro.nextStep();
        event.preventDefault();
    }
}

Прерывание стандартной навигации

Если требуется полностью заменить стандартные клавиши стрелок, можно отключить keyboardNavigation и реализовать собственную логику:

intro.setOptions({ keyboardNavigation: false });

document.addEventListener('keydown', function(event) {
    if (event.code === 'ArrowRight') {
        intro.nextStep();
        event.preventDefault();
    } else if (event.code === 'ArrowLeft') {
        intro.previousStep();
        event.preventDefault();
    } else if (event.code === 'Escape') {
        intro.exit();
        event.preventDefault();
    }
});

Использование сторонних библиотек для горячих клавиш

Для более сложных сценариев можно интегрировать библиотеки вроде Mousetrap или Hotkeys.js, чтобы задавать комбинации типа Ctrl+N или Shift+ArrowRight:

hotkeys('ctrl+n', function() {
    intro.nextStep();
});

hotkeys('ctrl+p', function() {
    intro.previousStep();
});

Это позволяет обрабатывать сложные сочетания без необходимости вручную проверять event.ctrlKey или event.shiftKey.

Рекомендации по UX

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

Динамическая смена клавиатурных сочетаний

Для адаптивного интерфейса можно менять горячие клавиши в зависимости от контекста, используя событие onbeforechange:

intro.onbeforechange(function(targetElement) {
    if (targetElement.id === 'step3') {
        document.removeEventListener('keydown', defaultKeys);
        document.addEventListener('keydown', customStepThreeKeys);
    } else {
        document.removeEventListener('keydown', customStepThreeKeys);
        document.addEventListener('keydown', defaultKeys);
    }
});

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

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

Оглавление