FocusEvent в JavaScript — події focus і blur на елементі

Опис

FocusEvent включає події, що відстежують, коли елемент отримує або втрачає фокус, і зазвичай використовуються для формових елементів, таких як input, textarea, button. Основними подіями є focus, яка спрацьовує, коли елемент отримує фокус, та blur, що активується при втраті фокусу. Це дозволяє реагувати на введення даних або зміну фокусу в інтерфейсі користувача, надаючи зручність при роботі з формами.

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

inputElement.addEventListener('focus', (event) => {
  event.target.style.borderColor = 'blue';
});

blur дозволяє обробляти ситуації, коли користувач покидає елемент, наприклад, для перевірки введеного значення або зняття виділення. Завдяки цій події можна запускати валідацію даних, яку слід робити після введення, але не під час. У випадку помилки можна, наприклад, додати червону рамку або повідомлення для користувача.

inputElement.addEventListener('blur', (event) => {
  if (!event.target.value) {
    event.target.style.borderColor = 'red';
  }
});

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

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

focusin і focusout зручні для роботи зі складними формами, де потрібно відстежувати фокус на всіх вкладених полях, не вказуючи кожне з них окремо. На відміну від focus та blur, які не можуть "бульбашитися" догори, focusin і focusout піднімаються від дочірніх елементів до батьківських. Це важлива відмінність, яка робить їх особливо корисними для відстеження фокусу на великих формах чи списках елементів.

правити

Порада

Щоб виділити активний елемент при фокусі, рекомендується використовувати класи замість прямих стилів в обробнику focus. Це дозволяє додавати стилі лише за допомогою CSS і підтримувати читабельність коду, додаючи та видаляючи класи.

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

Порада

Пам'ятайте, що подія blur не спрацьовує на прихованих елементах, таких як ті, що мають display: none. Якщо ви працюєте з елементами, які можуть динамічно приховуватися, переконайтеся, що важливі події для них обробляються іншим способом.

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

Порада

Використовуйте preventDefault() обережно в обробнику події focus, оскільки це може призвести до неможливості отримання фокусу для елемента. Це може бути корисно тільки для спеціальних елементів, де фокус потрібен для інших подій, наприклад, при виклику модальних вікон.

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

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

Синтаксис

element.addEventListener('focus', (event) => {
  // код, що виконується при отриманні фокусу
});

element.addEventListener('blur', (event) => {
  // код, що виконується при втраті фокусу
});

властивості

Переглядачі

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

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

Переглядач
	26	24	7	15	12	9

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

Переглядач
	4.4	26	24	7

Приклади

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

<div class="form-field">перший елемент form-field</div>
<div class="form-field">другий елемент form-field</div>

const formFields = document.querySelectorAll('.form-field');

formFields.forEach(field => {
  field.addEventListener('blur', (event) => {
    if (event.target.value === '') {
      event.target.style.borderColor = 'red';
      alert('Поле не може бути порожнім!');
    } else {
      event.target.style.borderColor = 'green';
    }
  });
});

<form id="my-form">
    <label>Ім'я: <input type="text" name="name" value="Лесь"></label>
    <button type="submit">Надіслати</button>
</form>

const form = document.getElementById('my-form');

form.addEventListener('focusin', (event) => {
  if (event.target.classList.contains('form-field')) {
    event.target.style.backgroundColor = 'lightyellow';
  }
});

form.addEventListener('focusout', (event) => {
  if (event.target.classList.contains('form-field')) {
    event.target.style.backgroundColor = '';
  }
});

<header>
  <h2 class="title">Focus Events</h2>
  <p class="description">Відстежує, коли елемент отримує або втрачає фокус для інтерфейсної взаємодії.</p>
</header>
<main>
  <div class="result">
    <form id="sample-form">
      <!-- Поля форми для взаємодії -->
      <label>
        Ім'я:
        <input type="text" class="form-field" id="name-input" placeholder="Введіть ваше ім'я">
      </label>
      <br>
      <label>
        Email:
        <input type="email" class="form-field" id="email-input" placeholder="Введіть вашу електронну пошту">
      </label>
      <br>
      <label>
        Телефон:
        <input type="tel" class="form-field" id="phone-input" placeholder="Введіть ваш номер телефону">
      </label>
      <br>
      <button type="button" id="reset-button">Скинути</button>
    </form>
  </div>
</main>

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

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  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;
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

.form-field {
  display: block;
  margin: 10px 0;
  padding: 8px;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.form-field:focus {
  border-color: #4a90e2;
  outline: none;
}

.warning {
  border-color: red;
}

document.addEventListener('DOMContentLoaded', () => {
  const formFields = document.querySelectorAll('.form-field');
  const resetButton = document.getElementById('reset-button');

  // Обробка фокусу для виділення активного поля
  formFields.forEach(field => {
    field.addEventListener('focus', event => {
      event.target.style.backgroundColor = '#e6f7ff'; // Зміна фону на світло-блакитний
    });

    // Обробка події blur для перевірки заповнення полів
    field.addEventListener('blur', event => {
      event.target.style.backgroundColor = ''; // Повернення фону
      if (!event.target.value.trim()) {
        event.target.classList.add('warning'); // Виділення червоним, якщо порожнє
        alert(`Поле "${event.target.placeholder}" не може бути порожнім!`);
      } else {
        event.target.classList.remove('warning'); // Видалення попередження, якщо заповнене
      }
    });
  });

  // Скидання полів і стилів при натисканні кнопки "Скинути"
  resetButton.addEventListener('click', () => {
    formFields.forEach(field => {
      field.value = ''; // Очистити значення
      field.classList.remove('warning'); // Видалити червону рамку
      field.style.backgroundColor = ''; // Відновити фоновий колір
    });
  });
});
//# sourceURL=pen.js