Атрибут autofocus тега <button>
Описание
Атрибут autofocus автоматически устанавливает фокус на кнопку при загрузке страницы. Это полезно для улучшения пользовательского опыта, когда кнопка является основным действием на странице.
<button autofocus>Нажми Enter</button>
Особенности работы:
| Ситуация | Поведение | Примечание |
|---|---|---|
| Одна кнопка | Фокус устанавливается | Обычный сценарий |
| Несколько кнопок | Фокус на первой | Только один элемент может иметь autofocus |
| Динамическое добавление | Не работает | Только при первоначальной загрузке |
Практический пример с формами:
<form>
<input type="text" placeholder="Введите имя">
<button autofocus type="submit">Отправить</button>
</form>
Важные замечания:
- На странице должен быть только один элемент с
autofocus - Может конфликтовать с другими элементами форм
- Не работает в модальных окнах, которые открываются после загрузки страницы
- Для динамического фокуса используйте JavaScript:
element.focus()
Альтернатива на JavaScript:
<button id="main-btn">Основная кнопка</button>
<script>
document.getElementById('main-btn').focus();
</script>
Примечание: Используйте autofocus осторожно, чтобы не нарушить ожидания пользователей. Избегайте автоматического фокуса на кнопках "Удалить" или других потенциально опасных действиях.