JavaScript onfocus &
события фокуса

📌 focus / blur / focusin / focusout — полный интерактивный гайд

Событие onfocus срабатывает, когда элемент получает фокус. Идеально для форм, accessibility, валидации и улучшения UX.

🎯 1. Событие onfocus — базовый

✨ Кликни на поле — сработает onfocus
💡 Поле получило фокус 0 раз
// HTML: <input onfocus="handleFocus(this)">
// или через addEventListener:
element.addEventListener('focus', (event) => {
   console.log('фокус на', event.target);
});

✅ Событие focus не всплывает, но существует focusin (всплывающая версия). Ниже вы увидите разницу.

🔄 2. Фокус / Потеря фокуса (focus + blur) — интерактивный трекер

📝 Имя пользователя

⚡ Фокусов: 0 | Потерь: 0

📋 Комментарий

⚡ Фокусов: 0 | Потерь: 0
📡 Журнал событий focus/blur (onfocus / onblur) будет тут...

💡 Каждый раз, когда поле получает фокус (focus) или теряет (blur) — запись в лог. Демонстрирует работу .onfocus и .onblur.

🌊 3. Всплытие: focusin vs focusout + контейнер

События focusin и focusout всплывают, в отличие от focus/blur. Это удобно для делегирования.

🎨 Родительский контейнер (отслеживает focusin/focusout) — кликни в любое поле внутри:

💬 Здесь отобразится событие focusin/focusout (всплытие)
// focusin (всплывает) — отличный способ отслеживать фокус на многих элементах
container.addEventListener('focusin', (e) => {
   console.log(`фокус на: ${e.target.tagName}`);
});
// onfocus не всплывает, но можно использовать onfocusin (нестандарт) — лучше addEventListener.

🧩 4. Кастомный элемент с визуальной обратной связью (onfocus + классы)

🌟 Фокус: нет
⏳ Не было фокуса

* Нажмите Tab или кликните по кнопке

⚙️ 5. Программный вызов .focus() и сценарии автокоррекции

Метод .focus() устанавливает фокус на элементе. Часто используется при валидации или навигации.

👉 Используйте кнопки для теста .focus()

📖 Что такое JavaScript onfocus?

onfocus — это обработчик события, который выполняется, когда элемент получает фокус (например, через клик мыши, клавишу Tab или программно). Чаще всего используется с элементами формы: <input>, <textarea>, <select> и любыми элементами с атрибутом tabindex.

// Пример с атрибутом onfocus (inline)
<input onfocus="this.style.background='#fff3e0'" onblur="this.style.background=''">
// Современный подход:
const input = document.querySelector('#myInput');
input.onfocus = () => { console.log('focus!'); };
// или addEventListener (рекомендуется):
input.addEventListener('focus', handler);