Как снять фокус с элемента?

Как снять фокус с элемента

Управление фокусом (focus management) - это важная часть создания хорошего UX и обеспечения доступности. Есть несколько способов программно снять фокус с элемента.

1. Метод blur()

Самый простой способ - вызвать метод blur() на элементе:

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

// Или для кнопки
const button = document.querySelector('button');
button.blur();

Это сразу убирает фокус с элемента и вызывает события:

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

input.addEventListener('blur', () => {
  console.log('Фокус снят');
});

input.addEventListener('focus', () => {
  console.log('Получен фокус');
});

// Нажимаем кнопку
button.addEventListener('click', () => {
  input.blur(); // Событие 'blur' срабатывает
});

2. React подход - useRef

В React используем useRef для доступа к DOM элементу:

import { useRef } from 'react';

export function InputForm() {
  const inputRef = useRef(null);
  
  const handleClick = () => {
    // Снимаем фокус
    inputRef.current?.blur();
  };
  
  return (
    <>
      <input ref={inputRef} type="text" placeholder="Введите текст" />
      <button onClick={handleClick}>Убрать фокус</button>
    </>
  );
}

3. Снятие фокуса после отправки формы

Частый случай - нужно убрать фокус с input после отправки:

export function SearchForm() {
  const inputRef = useRef(null);
  
  const handleSubmit = async (e) => {
    e.preventDefault();
    
    try {
      // Отправляем запрос
      await api.post('/search', { query: inputRef.current.value });
    } finally {
      // Убираем фокус независимо от результата
      inputRef.current?.blur();
    }
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <input ref={inputRef} type="text" />
      <button type="submit">Поиск</button>
    </form>
  );
}

4. Направление фокуса на другой элемент

Вместо просто снятия фокуса - перенести его на другой элемент:

import { useRef } from 'react';

export function Modal() {
  const closeButtonRef = useRef(null);
  const inputRef = useRef(null);
  
  const handleClose = () => {
    // Снять фокус с input и перенести на кнопку Close
    closeButtonRef.current?.focus();
    // или просто
    inputRef.current?.blur();
  };
  
  return (
    <div className="modal">
      <input ref={inputRef} type="text" />
      <button ref={closeButtonRef} onClick={handleClose}>
        Close
      </button>
    </div>
  );
}

5. Автоматическое снятие фокуса через useEffect

Удалить фокус при определенном условии:

import { useRef, useEffect, useState } from 'react';

export function CodeInput() {
  const inputRef = useRef(null);
  const [code, setCode] = useState('');
  const [isValid, setIsValid] = useState(false);
  
  useEffect(() => {
    // Если введено 6 цифр - убрать фокус
    if (code.length === 6) {
      setIsValid(true);
      inputRef.current?.blur();
    } else {
      setIsValid(false);
    }
  }, [code]);
  
  return (
    <>
      <input
        ref={inputRef}
        type="text"
        maxLength="6"
        value={code}
        onChange={(e) => setCode(e.target.value)}
        placeholder="Введите код"
      />
      {isValid && <p>Код валиден!</p>}
    </>
  );
}

6. Полный контроль: фокус через click outside

Убирать фокус с input при клике вне его:

import { useRef, useEffect, useState } from 'react';

export function SearchBox() {
  const containerRef = useRef(null);
  const inputRef = useRef(null);
  const [isFocused, setIsFocused] = useState(false);
  
  useEffect(() => {
    const handleClickOutside = (event) => {
      // Если клик вне контейнера - убрать фокус
      if (containerRef.current && !containerRef.current.contains(event.target)) {
        inputRef.current?.blur();
        setIsFocused(false);
      }
    };
    
    document.addEventListener('mousedown', handleClickOutside);
    
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, []);
  
  return (
    <div ref={containerRef}>
      <input
        ref={inputRef}
        type="text"
        onFocus={() => setIsFocused(true)}
        onBlur={() => setIsFocused(false)}
        placeholder="Поиск"
      />
      {isFocused && <div className="dropdown">Подсказки...</div>}
    </div>
  );
}

7. Обработка события blur

Что происходит когда фокус снимается:

export function ValidatedInput() {
  const handleBlur = (e) => {
    const value = e.target.value;
    
    // Валидация при снятии фокуса
    if (!value) {
      e.target.classList.add('error');
    } else {
      e.target.classList.remove('error');
    }
  };
  
  return (
    <input
      type="email"
      onBlur={handleBlur}
      placeholder="Email"
    />
  );
}

8. Отладка фокуса

Проверить какой элемент в данный момент имеет фокус:

// В консоли браузера
document.activeElement // Текущий элемент с фокусом

// Или в коде
console.log('Активный элемент:', document.activeElement);

// Проверить есть ли фокус
const input = document.getElementById('username');
console.log('Has focus:', document.activeElement === input);

9. Лучшие практики

Не скрывать фокус визуально

/* ПЛОХО - убирает видимость фокуса */
input:focus {
  outline: none;
}

/* ХОРОШО - настроить оформление фокуса */
input:focus {
  outline: 2px solid blue;
  outline-offset: 2px;
}

Управлять фокусом для доступности

export function Modal({ isOpen, onClose }) {
  const firstInputRef = useRef(null);
  const closeButtonRef = useRef(null);
  
  useEffect(() => {
    if (isOpen) {
      // Переместить фокус в модаль для доступности
      firstInputRef.current?.focus();
    } else {
      // Вернуть фокус на кнопку, которая открыла модаль
      closeButtonRef.current?.focus();
    }
  }, [isOpen]);
  
  return (
    <dialog open={isOpen}>
      <input ref={firstInputRef} type="text" />
      <button ref={closeButtonRef} onClick={onClose}>
        Закрыть
      </button>
    </dialog>
  );
}

10. Отключение и включение фокуса

export function DisablablInput() {
  const [disabled, setDisabled] = useState(false);
  const inputRef = useRef(null);
  
  const handleDisable = () => {
    // Если отключаем input - убираем фокус
    if (!disabled) {
      inputRef.current?.blur();
    }
    setDisabled(!disabled);
  };
  
  return (
    <>
      <input
        ref={inputRef}
        type="text"
        disabled={disabled}
      />
      <button onClick={handleDisable}>
        {disabled ? 'Включить' : 'Отключить'}
      </button>
    </>
  );
}

Резюме

• blur() - основной метод для снятия фокуса
• useRef в React - стандартный способ доступа к элементам
• Управление фокусом - важно для UX и доступности
• Обрабатывай onBlur - валидация, очистка, побочные эффекты
• Визуальная обратная связь - всегда показывай когда фокус есть/нет