Управление фокусом в DOM с помощью BX.focus: практическое руководство для разработчиков 1С-Битрикс

BX.focus(node) — это «битриксовая» обёртка над нативным element.focus(), которая бережно кросс-браузерно ставит курсор в нужное поле, автоматически прокручивает страницу до элемента и защищает вас от ошибок, если нода ещё не попала в DOM. Ниже - всё, что нужно знать о приёмах работы с фокусом: от лендингов и интернет-магазинов до корпоративных порталов.

Зачем управлять фокусом вручную

1. Удобство заполнения форм: сразу поставить курсор в первое поле.
2. Валидация: мигом перевести пользователя к первому ошибочному инпуту.
3. Доступность (a11y): обеспечить навигацию по клавиатуре и для скрин-ридеров.
4. UX-мелочи: открываем поп-ап — и фокус уже в поисковой строке, а не «где-то» на странице.

Сигнатура и поведение функции

/**
 * BX.focus
 * @param {DOMNode} node – DOM-элемент, на который нужно поставить фокус
 */
BX.focus = function (node) {
    /* внутри — проверка на наличие элемента, вызов .focus()
       и авто-scrollIntoView при необходимости */
}

Главное отличие от element.focus()

• BX.focus молча игнорирует попытку сфокусироваться на null/undefined.
• На старых IE и мобильных браузерах функция задействует костыли Bitrix Core, поэтому работает стабильнее.

Практический пример

<div id="togglediv" class="btn">Фокус на t3</div>
<input id="t1" type="text" maxlength="20" value="t1" autofocus>
<input id="t2" type="text" maxlength="20" value="t2">
<input id="t3" type="text" maxlength="20" value="t3">
<style>
.btn{
    cursor:pointer; padding:8px 16px; margin:12px auto; text-align:center;
    background:#4c70ff; color:#fff; border-radius:6px; width:max-content;
}
</style>
<script>
BX.ready(function () {
    BX.bind(BX('togglediv'), 'click', function () {
        BX.focus(BX('t3'));
    });
});
</script>

7 полезных сценариев применения

1. Фокус в первом поле формы при загрузке страницы

<script>
BX.ready(function () {
    BX.focus(BX('loginEmail'));        // «логин» активен сразу
});
</script>

2. Перейти к первому полю с ошибкой после валидации

function showErrors(errors) {
    errors.forEach(function(item){
        BX.addClass(item.node, 'has-error');
    });
    // Находим первую ошибку и ставим фокус
    const firstInvalid = errors[0] && errors[0].node;
    if (firstInvalid) {
        BX.focus(firstInvalid);
    }
}

Хак: если элемент внутри display:none, сначала раскройте контейнер, а потом ставьте фокус (иначе браузер проигнорирует).

3. Авто-фокус в поиске внутри модального окна

const popup = new BX.PopupWindow('searchPopup', null, {
    content: '<input id="popupSearch" type="text" placeholder="Поиск…">',
    closeIcon: true,
    onAfterPopupShow: function () {
        BX.focus(BX('popupSearch'));
    }
});
BX.bind(BX('openSearchBtn'), 'click', () => popup.show());

4. Переключение вкладок клавишами-стрелками

BX.bind(document, 'keydown', function (e) {
    if (e.key === 'ArrowRight') {
        const nextTab = document.querySelector('.tab.active').nextElementSibling;
        if (nextTab) {
            BX.focus(nextTab);                     // ставим фокус
            nextTab.click();                       // переключаем
        }
    }
});

5. Фокус на динамически подгруженный элемент после AJAX

BX.ajax.runComponentAction('my:component', 'addComment', {
    mode: 'class', data: { message }
}).then(function (response) {
    const id = response.data.newId;
    BX('comments').insertAdjacentHTML('beforeend', response.data.html);
    // Дождёмся рендера новой ноды
    BX.defer(function () {
        BX.focus(BX('comment-' + id));
    }, this);
});

6. «Прыгающая» форма с подсказками при вводе карточки

BX.bind(BX('cardNumber'), 'input', function (e) {
    if (this.value.replace(/\s/g,'').length === 16) {
        BX.focus(BX('cardExpiry'));
    }
});

7. Обработка нестандартных элементов (например, contenteditable)

<div id="editable" contenteditable="true" class="editor">Введите текст…</div>
<script>
BX.ready(function () {
    BX.bind(BX('editBtn'), 'click', function(){
        BX.focus(BX('editable'));
    });
});
</script>

Лайфхаки и частые ошибки

Короткий чек-лист перед релизом

• [ ] Все элементы, где вызывается BX.focus, реально существуют на момент вызова.
• [ ] Для нестандартных нод указан tabindex.
• [ ] После фокуса интерфейс не «прыгает» (проверьте scrollIntoView).
• [ ] Пользователь может уйти с элемента клавишей Tab — не запирайте его искусственно.

Заключение

BX.focus — маленькая, но крайне полезная функция ядра 1С-Битрикс. Правильное управление фокусом ускоряет ввод данных, снижает количество ошибок и делает сайт дружелюбнее для людей с ограниченными возможностями. Используйте примеры из статьи как шаблоны, комбинируйте их с компонентами Битрикс и улучшайте UX без лишнего JavaScript-кода.

Удачной разработки!