Перейти на PRO

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

Тип вопроса: Доступность Вероятность: 10% Категория: Frontend Разработчик

Ответ

Для управления фокусом в 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. Для модальных окон важно возвращать фокус на ранее активный элемент

Ответ 18+ 🔞

Так, слушай сюда, про фокус в JavaScript. Ну, в смысле, не про умение концентрироваться, а про эту вот ебучую точку ввода на странице, которая бегает по полям. Чтоб ей, блядь, пусто было.

В общем, есть у тебя какая-нибудь форма, кнопка, дивок — любая херня. И ты хочешь, чтобы на неё фокус перескочил, как блоха на собаку. Для этого у элементов есть два главных метода, проще пареной репы.

Первый — focus(). Это как крикнуть элементу: «Эй, ты, пизда с ушами, внимание на тебя!». Второй — blur(). Это уже: «А теперь, сука, отвлекайся, я с тобой закончил».

Вот, смотри, как это выглядит в коде, тут всё просто:

const input = document.querySelector('input');
input.focus(); // бац, и курсор уже мигает в этом поле
input.blur(); // оп, и фокус упиздовал нахуй

Но это если ты сам, как царь и бог, управляешь этим цирком. А если надо узнать, когда пользователь ткнул в поле или из него вылез? Тут на сцену выходят события focus и blur. Вешаешь на элемент слушателя — и он тебе докладывает, как подсадная утка.

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

А теперь, внимание, ёпта, важные нюансы, на которых все обжигаются, как дураки на горячем.

  1. tabindex="-1". Это такая хитрая жопа. Элемент с этим атрибутом ты можешь фокусить программно, через тот же focus(). Но! Из обычной табуляции по клавише Tab он вычеркнут, как грешник из списков рая. То есть пользователь табом до него не допрыгнет — только если ты его силой не притянешь.

  2. Безопасность, блядь. Иногда ты вызываешь focus(), а он нихуя не работает. «Что за хуйня?» — спрашиваешь ты. А это браузер тебе говорит: «Чувак, я не дам просто так взять и сфокусироваться на элементе без обработчика событий, например, из колбэка таймаута, который не был инициирован действием пользователя». Короче, если не сработало — ищи, где у тебя этот вызов висит, часто проблема в этом.

  3. Модальные окна — отдельная песня. Вот ты открыл модалку, пользователь в ней покликал, потом закрыл. А фокус-то где остался? Правильно, в пизду улетел, в никуда. А должен вернуться на ту кнопку, которую ты нажал для открытия. Забыл это сделать — получил ебучую проблему с доступностью, и тебя сейчас нахуй пошлют все, кто пользуется скринридерами или клавиатурой. Так что запомни: закрыл модалку — верни фокус туда, откуда пришёл. Это святое.

Вот и вся магия, не такая уж и сложная, если не выёбываться. Главное — помни про эти грабли, а то они тебе по ебалу так дадут, мало не покажется.

© ХакСобесов, 2026
support@hacksobesov.com