Как управлять фокусом

Для управления фокусом в JS используются методы focus() и blur(). Также можно использовать атрибут tabindex для элементов, которые по умолчанию не фокусируются.

Пример:

const input = document.querySelector('input');
input.focus(); // установить фокус
input.blur(); // убрать фокус

Для отслеживания фокуса есть события focus и blur:

input.addEventListener('focus', () => console.log('Получил фокус'));
input.addEventListener('blur', () => console.log('Потерял фокус'));

Важные нюансы:

1. tabindex="-1" позволяет фокусироваться программно, но исключает из tab-последовательности
2. focus() может не работать без обработчика событий из-за политик безопасности браузеров
3. Для модальных окон важно возвращать фокус на ранее активный элемент