Подія focusin в JavaScript — фокус, що випливає вгору

Загальний опис

Подія focusin виникає, коли елемент або будь-який з його дочірніх елементів отримує фокус. Це схоже на подію focus, але з тією різницею, що focusin може спливати вгору по DOM-дереву, дозволяючи обробляти події фокусу не тільки на елементах, але й на їх контейнерах.

Уявіть, що у вас є форма з кількома полями. Якщо ви хочете відстежувати, коли будь-яке поле в цій формі отримує фокус, ви можете використати подію focusin на елементі форми. Це дозволить вам не прив'язувати окремий обробник для кожного поля форми, а натомість реагувати на фокус для всієї групи елементів.

Ось базовий приклад:

const form = document.querySelector('form');

form.addEventListener('focusin', function(event) {
  console.log('Поле отримало фокус:', event.target);
});

У цьому прикладі подія focusin реагує на будь-яке поле форми, яке отримує фокус, і виводить у консоль елемент, що його отримав.

Особливістю focusin є те, що вона спливає (bubbling), на відміну від події focus. Це означає, що ви можете повісити обробник на батьківський елемент і отримати доступ до всіх елементів, які фокусуються всередині нього, без необхідності прив’язувати обробники до кожного окремого поля.

Якщо вам потрібно робити щось подібне з елементами, які втрачають фокус, використовуйте подію focusout, яка також має можливість спливання.

Ще один приклад:

document.addEventListener('focusin', function(event) {
  event.target.style.backgroundColor = 'lightyellow';
});

Цей код змінює фон елемента, який отримав фокус, на жовтий.

Важливо зазначити, що подія focusin підтримується більшістю сучасних браузерів, але якщо ви розробляєте додатки з використанням старих версій браузерів, переконайтеся, що ваш код має відповідні поліфіли чи альтернативи.

правити

Порада

Наскільки зручно використовувати focusin, настільки слід бути обережним з його спливанням. Якщо обробник на батьківському елементі виконує важкі операції, це може уповільнити роботу при частому переході між елементами.

автор: Bond правити

Порада

У складних формах можна створювати умовну логіку на основі типу елемента, що отримав фокус. Наприклад, якщо фокус переміщується між текстовими полями, виконувати одну дію, а якщо фокус переходить на кнопки або чекбокси — іншу.

автор: Bond правити

Порада

Використовуйте focusin в поєднанні з event.target для більш точного контролю над тим, який елемент був активований, і відповідної реакції в залежності від типу або контенту елемента.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.addEventListener('focusin', function(event) {
  // Код, що виконується при спрацюванні події
});

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1*	52*	5	11.6	12*	9

Підтримка: мобільні переглядачі

Переглядач
	4.4*	18*	52*	4.2

Приклади

+ запропонувати свій приклад у пісочниці

<header>
  <h2 class="title">HTML Events: focusin</h2>
  <p class="description">Ця подія викликається, коли елемент або його нащадки отримують фокус.</p>
</header>
<main>
  <div class="result">
    <!-- Форма для демонстрації -->
    <form id="userForm">
      <label for="name">Ім'я:</label>
      <input type="text" id="name" name="name" placeholder="Введіть ім'я">
      
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" placeholder="Введіть email">

      <label for="password">Пароль:</label>
      <input type="password" id="password" name="password" placeholder="Введіть пароль">
      
      <button type="submit">Надіслати</button>
    </form>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

input {
  display: block;
  margin-bottom: 15px;
  padding: 8px;
  width: 100%;
  max-width: 300px;
  border: 1px solid #ccc;
  border-radius: 4px;
  transition: border-color 0.3s;
}

input:focus {
  outline: none;
}

.highlight {
  border-color: #4CAF50;
  background-color: #f1f1f1;
}

// Отримуємо форму
const form = document.getElementById('userForm');

// Додаємо обробник події focusin на форму
form.addEventListener('focusin', function (event) {
  // Додаємо клас highlight до елемента, що отримав фокус
  if (event.target.tagName === 'INPUT') {
    event.target.classList.add('highlight');
  }
});

// Додаємо обробник події focusout для зняття підсвічування
form.addEventListener('focusout', function (event) {
  // Забираємо клас highlight при втраті фокусу
  if (event.target.tagName === 'INPUT') {
    event.target.classList.remove('highlight');
  }
});
//# sourceURL=pen.js

document.addEventListener('focusin', function(event) {
  if (event.target.tagName === 'BUTTON') {
    event.target.style.borderColor = 'green';
  }
});

<div id="complexForm">Демонстраційний елемент</div>

const form = document.querySelector('#complexForm');

form.addEventListener('focusin', function(event) {
  if (event.target.tagName === 'INPUT' && event.target.type === 'text') {
    console.log('Фокус на текстовому полі:', event.target.name);
  }
});