Атрибут autofocus тега <textarea>

Описание

Атрибут autofocus в теге <textarea> автоматически устанавливает фокус на текстовое поле при загрузке страницы. Это позволяет пользователю сразу начинать ввод без необходимости кликать мышкой.

Пример использования:
<form> <label for="message">Ваше сообщение:</label> <textarea id="message" autofocus></textarea> </form>

Значения атрибута:

Значение Описание Когда использовать
autofocus Активирует автоматический фокус Когда поле должно быть активным при загрузке
отсутствует Автофокус не активирован В большинстве стандартных случаев

Особенности работы:

  • Работает только при первом открытии страницы
  • Если атрибут указан у нескольких элементов, фокус получит последний
  • Может конфликтовать с JavaScript-обработчиками фокуса
  • Поддерживается всеми современными браузерами

Пример с несколькими полями:

<form> <textarea autofocus>Это поле получит фокус</textarea> <textarea autofocus>А это - нет (конфликт)</textarea> <textarea>Обычное поле</textarea> </form>

Рекомендации:

  • Используйте для главного поля формы (например, поиска)
  • Избегайте на страницах с несколькими важными полями
  • Для модальных окон лучше использовать JavaScript focus()
  • Учитывайте UX - не все пользователи хотят сразу вводить текст

Ограничения:

  • Может мешать скринридерам
  • Не работает при повторном отображении страницы (например, в SPA)
  • Может вызывать неожиданное поведение на мобильных устройствах
  • Запрещен в некоторых CMS по соображениям доступности

Альтернатива на JavaScript:

<textarea id="js-focus"></textarea> <script> // Более контролируемый вариант document.getElementById('js-focus').focus(); </script>

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

  • JavaScript-библиотеки управления фокусом
  • React-хуки useRef/useEffect
  • Специальные решения для доступности (a11y)