css.in.ua
Підтримати

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() може бути корисним при реалізації користувацьких інтерфейсів, які вимагають зміни відображення або поведінки елементів при втраті фокусу. Наприклад, можна змінювати стилі елементів або відображати підказки, коли користувач переміщує фокус з одного поля на інше.
Порада:

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

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

Синтаксис

blur(radius)

Параметри

*radius

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

Return

Переглядачі

Переглядач

18

35

6

15

12
Переглядач

4.4

53

35

6
Переглядач

-

-

Приклади


У цьому прикладі є текстове поле і дві кнопки. Натискання на кнопку "Фокус на текстовому полі" надає фокус текстовому полю, а натискання на кнопку "Розфокус на текстовому полі" розфокусує його. Метод blur() використовується для розфокусування елементу.

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

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

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

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

У цьому прикладі ми отримуємо посилання на текстове поле та кнопку, і додаємо обробники подій для обох елементів. При фокусуванні на текстовому полі, його фоновий колір змінюється, а при кліку на кнопку метод 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();
});

Спільнота

Зв'язок