Blur: примеры (JAVASCRIPT)

Использование метода blur в JavaScript на практике

Раздел: DOM, Фокус

blur: undefined

типовые примеры blur на php, python, mysql blur изменения javascript примеры расширенные

Основы метода blur

Метод blur() принадлежит к DOM API и применяется для удаления фокуса с текущего активного элемента. Этот метод не принимает параметров и всегда возвращает значение undefined.

Использование метода актуально в ситуациях, когда требуется программно убрать фокус с элемента. Типичные случаи применения включают обработку событий клавиатуры, валидацию форм, создание кастомных элементов управления и улучшение пользовательского интерфейса.

При вызове метода у элемента, который не поддерживает фокус по умолчанию, метод не окажет никакого эффекта. Для таких элементов предварительно требуется установка атрибута tabindex.

Базовые примеры использования

Удаление фокуса с текстового поля:

const input = document.getElementById('username');
input.blur();

Фокус удален с элемента input

Использование с кнопкой:

const button = document.querySelector('button');
button.addEventListener('click', () => {
  document.activeElement.blur();
});

При клике фокус снимается с активного элемента

Альтернативные методы в JavaScript

Метод focus() выполняет противоположное действие, устанавливая фокус на элемент. Эти методы часто используются вместе.

События focus и blur позволяют отслеживать изменения состояния фокуса. Событие focusin аналогично focus, но всплывает, тогда как focusout является всплывающим аналогом blur.

Для элементов форм доступен метод reportValidity(), который проверяет валидность и может автоматически управлять фокусом.

Распространенные ошибки

Попытка вызова метода у несуществующего элемента:

document.getElementById('missing').blur();

Uncaught TypeError: Cannot read properties of null

Непонимание асинхронного поведения:

input.blur();
console.log(document.activeElement === input);

Может вернуть true, если код выполняется синхронно

Игнорирование особенностей мобильных устройств:

// На мобильных устройствах blur может скрывать клавиатуру
input.blur(); // Клавиатура скрывается

Изменения в современных версиях

Спецификация DOM Living Standard не вносила значительных изменений в метод blur() в последние годы. Основные изменения касаются улучшения поддержки в различных браузерах и исправления мелких несоответствий.

В современных браузерах улучшена обработка метода для элементов с атрибутом contenteditable и кастомных элементов. Также уточнено поведение при вызове метода во время событий фокуса.

Расширенные примеры применения

Интеграция с валидацией формы:

Пример javascript

const form = document.querySelector('form');
form.addEventListener('submit', (e) => {
  e.preventDefault();
  document.activeElement.blur();
  // Дополнительная логика валидации
});

Фокус снимается перед валидацией формы

Создание кастомного dropdown:

Пример javascript

document.addEventListener('click', (event) => {
  if (!dropdown.contains(event.target)) {
    dropdown.blur();
  }
});

Dropdown закрывается при клике вне его области

Управление фокусом в одностраничных приложениях:

Пример javascript

router.onRouteChange(() => {
  // Сброс фокуса при смене маршрута
  if (document.activeElement && 
      document.activeElement !== document.body) {
    document.activeElement.blur();
  }
});

Фокус сбрасывается при навигации

Аналоги в других языках программирования

В Python с библиотекой Selenium:

from selenium.webdriver.common.keys import Keys
element = driver.find_element_by_id('field')
element.send_keys(Keys.TAB)

Фокус перемещается на следующий элемент

В PHP для веб-приложений управление фокусом обычно реализуется через JavaScript, но можно генерировать соответствующий код:

<?php
echo "<script>document.getElementById('input').blur();</script>";

Генерируется JavaScript код для выполнения

JS blur function comments

Blur Removes focus from the specified element.