JS метод Element.blur()

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

Метод HTMLElement.blur() відіграє ключову роль у керуванні фокусом елементів на веб-сторінці. Він дозволяє програмно видалити фокус з елемента, що робить його незамінним інструментом для розробників, які прагнуть покращити користувацький досвід шляхом управління поведінкою елементів форми або інших інтерактивних компонентів. Основна корисність методу полягає в можливості змінювати візуальний стан елемента, позначаючи його як "не у фокусі", що може бути використано для відновлення візуальної послідовності інтерфейсу або для запуску певних дій, коли елемент втрачає фокус.

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

document.getElementById('inputField').addEventListener('blur', function() {
    // Код для збереження даних
    console.log('Дані поля збережено.');
});

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

Для більш складних застосувань, blur() може бути комбінованим з іншими методами та подіями для створення багатофункціональних інтерактивних елементів. Наприклад, ви можете використати blur() разом з focus() для створення ефекту перемикання фокусу між різними елементами у відповідь на певні дії користувача:

document.getElementById('firstField').addEventListener('blur', function() {
    document.getElementById('secondField').focus();
});

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

Однак, при використанні blur(), важливо зважати на аспекти доступності веб-сайту, оскільки невірне управління фокусом може ускладнити навігацію для користувачів з обмеженими можливостями. Розробники повинні гарантувати, що використання blur() не порушує логіку навігації веб-сайту та не створює бар'єри для користувачів.

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

правити

Порада

Цей метод може бути корисним при розробці інтерактивних форм, де потрібно забезпечити зміну фокусу між полями введення або зняття фокусу для запобігання подальшого вводу. Наприклад, після успішної валідації поля електронної пошти, виклик emailInput.blur(); зніме фокус з поля.

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

Порада

Пам'ятайте, що використання blur() може вплинути на доступність веб-сайту. Наприклад, знімання фокусу з елементів без очевидної причини може спантеличити користувачів з обмеженими можливостями. Тому застосовуйте цей метод обережно, враховуючи вплив на всіх користувачів.

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

Порада

Розгляньте альтернативи до прямого використання blur(), якщо ваша мета — покращити навігацію за допомогою клавіатури або забезпечити кращу доступність. Іноді краще залишити можливість користувача самостійно управляти фокусом, застосовуючи логіку перемикання фокусу лише тоді, коли це дійсно покращує досвід користувача.

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

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

Синтаксис

blur()

Повернення

none

Повертає None (undefined).

автор: Bond

правити

Переглядачі

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

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

Переглядач
	1	1.5	3	8	12

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

Переглядач
	4.4	18	4	1

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

Переглядач
	-	-

Приклади

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

<input type="text" id="myInput" value="текст для прикладу" placeholder="Введи щось">

// Отримуємо елемент input
const inputElement = document.getElementById('myInput');

// Додаємо обробник події focus
inputElement.addEventListener('focus', () => {
  console.log('Поле введення отримало фокус');
});

// Додаємо обробник події blur
inputElement.addEventListener('blur', () => {
  console.log('Поле введення втратило фокус');
  // Виконуємо метод blur()
  inputElement.blur();
});

<input type="text" id="nameInput" value="текст для прикладу" placeholder="Введи щось">
<input type="email" id="emailInput" value="[email protected]" placeholder="Введи щось">

// Отримуємо елементи input
const nameInput = document.getElementById('nameInput');
const emailInput = document.getElementById('emailInput');

// Функція для перевірки валідності імені
function isValidName(name) {
  // Логіка перевірки імені
  return name.trim().length > 0;
}

// Функція для перевірки валідності email
function isValidEmail(email) {
  // Логіка перевірки email
  return /\S+@\S+\.\S+/.test(email);
}

// Додаємо обробники подій blur
nameInput.addEventListener('blur', () => {
  const isNameValid = isValidName(nameInput.value);
  if (!isNameValid) {
    nameInput.classList.add('invalid');
    emailInput.blur(); // Зняти фокус з поля email
  } else {
    nameInput.classList.remove('invalid');
  }
});

emailInput.addEventListener('blur', () => {
  const isEmailValid = isValidEmail(emailInput.value);
  if (!isEmailValid) {
    emailInput.classList.add('invalid');
  } else {
    emailInput.classList.remove('invalid');
  }
});