JS метод Object.blur()

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

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

Простий приклад застосування blur() можна побачити у випадку, коли потрібно автоматично відмінити фокус з текстового поля після виконання певної дії. Розгляньмо наступний код:

let inputField = document.getElementById('myInput');
inputField.blur();

У цьому прикладі метод blur() застосовується до елемента інтерфейсу з ідентифікатором myInput. Після виконання цього коду фокус буде видалено з вказаного текстового поля.

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

let inputField = document.getElementById('input1');
let button = document.getElementById('myButton');

button.addEventListener('click', function() {
    inputField.blur();
    // Додаткові дії
});

У цьому прикладі при натисканні на кнопку myButton фокус буде видалено з поля вводу input1. Це може бути корисним, наприклад, якщо дії, пов'язані з кнопкою, не вимагають продовження вводу у це поле.

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

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

Синтаксис

blur(radius)

Параметри

*radius

Радіус розмиття, вказаний у вигляді числа. Визначає значення стандартного відхилення для функції Гаусса, тобто скільки пікселів на екрані змішуються один з одним; таким чином, більше значення створить більший рівень розмиття. Значення 0 не змінює вхідні дані. Початкове значення для інтерполяції - 0. Відсоткові значення недійсні.

Return

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

// Отримуємо посилання на текстове поле
const textField = document.getElementById("myTextField");

// Додаємо обробник події для виклику методу blur() після введення даних
textField.addEventListener("input", function () {
  // Отримуємо значення з текстового поля
  const inputValue = textField.value;

  // Перевіряємо, чи введено достатньо символів
  if (inputValue.length >= 5) {
    // Якщо так, знімаємо фокус з текстового поля
    textField.blur();
  }
});

// Отримуємо посилання на два елементи - текстове поле та кнопку
const textField = document.getElementById("myTextField");
const button = document.getElementById("myButton");

// Додаємо обробники подій для текстового поля і кнопки
textField.addEventListener("focus", function () {
  // При фокусуванні на текстовому полі, змінюємо колір текстового поля
  textField.style.backgroundColor = "#FFFFE0";
});

button.addEventListener("click", function () {
  // При кліку на кнопку, знімаємо фокус з текстового поля
  textField.blur();
});