Подія blur в JavaScript — коли елемент втрачає фокус

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

blur — це подія, яка виникає, коли елемент втрачає фокус. Вона найчастіше використовується з елементами форми, такими як <input>, <textarea>, та <select>, де важливо відстежувати, коли користувач переміщає фокус з одного елемента на інший. Подія blur дозволяє виконувати перевірку введених даних або зберігати введені користувачем значення перед тим, як він переміститься на інший елемент форми.

Подія blur не є бульбашковою, що означає, що вона не поширюється (не спливає) на батьківські елементи DOM. Це відрізняє її від події focusout, яка викликається в аналогічних обставинах, але підтримує бульбашковий механізм. Наприклад, ви можете використати blur для виконання певних дій, коли користувач залишає текстове поле:

const inputField = document.getElementById('inputField');

inputField.addEventListener('blur', function(event) {
  console.log('Поле втратило фокус, перевіряємо значення.');
  // Виконання перевірки введених даних
});

У цьому прикладі, коли користувач залишає текстове поле з ідентифікатором inputField, браузер виконує функцію, яка може перевірити чи обробити введене значення. Це дозволяє розробникам забезпечити, що дані, введені користувачем, відповідають певним критеріям, перш ніж продовжити з наступним елементом.

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

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

правити

Порада

З подією blur можна виконувати асинхронні запити, наприклад, перевірку унікальності введених даних на сервері (наприклад, перевірку, чи існує вже введене ім'я користувача). Це може бути корисно для створення інтерактивних та інтелектуальних форм.

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

Порада

Використовуйте подію blur для збереження введених даних у локальному сховищі (Local Storage) або на сервері. Це корисно для форм з великою кількістю даних, де зберігання даних по мірі заповнення може запобігти їхній втраті у разі аварійного закриття сторінки.

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

Порада

Не забувайте про підтримку доступності. Коли ви використовуєте подію blur для виконання важливих змін на сторінці, переконайтеся, що ці зміни зрозумілі і доступні для користувачів з обмеженими можливостями, наприклад, використовуючи ARIA-атрибути або інші засоби.

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

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

Синтаксис

element.addEventListener('blur', function(event) {
  // Ваш код тут
});

Переглядачі

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

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

Переглядач
	66	57	11.1	53	16

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

Переглядач
	66	66	57	11.3

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

Переглядач
	15.0.0	1.0

Приклади

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

<input type="email" id="emailInput" value="[email protected]" placeholder="Введи щось">

const emailInput = document.getElementById('emailInput');

emailInput.addEventListener('blur', function(event) {
  const email = event.target.value;
  if (!email.includes('@') || !email.includes('.')) {
    alert('Введіть коректну адресу електронної пошти.');
  }
});

<textarea id="notesInput" rows="3" cols="30">Текст для прикладу</textarea>

const notesInput = document.getElementById('notesInput');

notesInput.addEventListener('blur', function(event) {
  localStorage.setItem('notes', event.target.value);
  console.log('Зміни збережено у локальному сховищі.');
});

<header>
  <h2 class="title">blur (HTML Event)</h2>
  <p class="description">Спрацьовує, коли елемент втрачає фокус.</p>
</header>
<main>
  <div class="result">
    <form id="validationForm">
      <label for="username">Ім'я користувача:</label>
      <input type="text" id="username" placeholder="Введіть ім'я користувача">
      <p id="usernameError" class="error-message"></p>
      
      <label for="email">Електронна пошта:</label>
      <input type="email" id="email" placeholder="Введіть вашу електронну пошту">
      <p id="emailError" class="error-message"></p>
      
      <button type="submit" id="submitButton">Надіслати</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 {
  margin-top: 10px;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  font-family: monospace;
  margin-bottom: 10px;
}

button {
  margin-top: 15px;
  padding: 10px 20px;
  background-color: #28a745;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #218838;
}

.error-message {
  color: #e74c3c;
  font-size: 14px;
  margin-top: -10px;
  margin-bottom: 10px;
}

document.addEventListener('DOMContentLoaded', function () {
  const usernameInput = document.getElementById('username');
  const emailInput = document.getElementById('email');
  const usernameError = document.getElementById('usernameError');
  const emailError = document.getElementById('emailError');

  // Валідація імені користувача при втраті фокуса
  usernameInput.addEventListener('blur', function (event) {
    const username = event.target.value;
    if (username.length < 3) {
      usernameError.textContent = 'Ім’я користувача повинно містити щонайменше 3 символи.';
    } else {
      usernameError.textContent = '';
    }
  });

  // Валідація електронної пошти при втраті фокуса
  emailInput.addEventListener('blur', function (event) {
    const email = event.target.value;
    if (!email.includes('@') || !email.includes('.')) {
      emailError.textContent = 'Введіть коректну адресу електронної пошти.';
    } else {
      emailError.textContent = '';
    }
  });
});
//# sourceURL=pen.js