JS метод Window.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 на певному елементі, щоб виконати специфічні дії, коли він втрачає фокус, наприклад, валідацію даних, введених користувачем.

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

Порада

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

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

Порада

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

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

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

Синтаксис

blur(radius)

Параметри

radius

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

автор: Bond

правити

Переглядачі

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

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

Переглядач
	1	1	1	≤12.1	12	4

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

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

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

Переглядач
	—

Приклади

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

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

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

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

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

<input type="text" id="myTextField" value="текст для прикладу" placeholder="Введи щось">
<button id="myButton">Натисни</button>

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

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

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

<header>
  <h2 class="title">Метод blur()</h2>
  <p class="description">Цей приклад демонструє використання методу <code>blur()</code> для розфокусування текстового поля.</p>
</header>
<main>
  <div class="result">
    <input type="text" id="textInput" placeholder="Введіть текст...">
    <button id="focusButton">Фокус на текстовому полі</button>
    <button id="blurButton">Розфокус на текстовому полі</button>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: Arial, sans-serif;
}

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);
}

input[type="text"] {
  padding: 10px;
  margin-right: 10px;
  margin-bottom: 6px;
  border: 1px solid #ccc;
  display: block;
}

button {
  padding: 10px 20px;
  background-color: #007BFF;
  color: #fff;
  border: none;
  cursor: pointer;
  display: block;
  margin-bottom: 6px;
}

document.addEventListener('DOMContentLoaded', () => {
  const textInput = document.getElementById('textInput');
  const focusButton = document.getElementById('focusButton');
  const blurButton = document.getElementById('blurButton');

  focusButton.addEventListener('click', () => {
    textInput.focus();
  });

  blurButton.addEventListener('click', () => {
    textInput.blur();
  });
});
//# sourceURL=pen.js