autofocus
Ustawia fokus na elemencie od razu po wczytaniu strony albo po otwarciu okna dialogowego.
- Dotyczy
- Elementy, na których może być fokus: pola formularzy, przyciski, linki i elementy z
tabindex
Przykład
#<form>
<label for="q">Czego chcesz się dziś nauczyć?</label>
<input type="search" id="q" name="q" placeholder="np. flexbox, pętle, tablice" autofocus>
<button>Szukaj</button>
</form>W podglądzie autofocus jest celowo wyłączony, żeby przykład nie zabierał fokusu stronie dokumentacji. Na zwykłej stronie kursor od razu migałby w polu wyszukiwania.
Definicja i zastosowanie
#Atrybut logiczny autofocus wskazuje element, który ma dostać fokus bez klikania. Na zwykłej stronie dzieje się to zaraz po jej wczytaniu, a w oknie <dialog> i w okienku z atrybutem popover w chwili ich otwarcia. Użytkownik może wtedy od razu pisać albo nacisnąć Enter.
Sprawdza się tam, gdzie jedno pole jest głównym celem wizyty: na stronie wyszukiwarki, przy logowaniu, w oknie z pytaniem. Na stronie powinien go mieć najwyżej jeden element. Jeśli ma go kilka, fokus trafi do pierwszego z nich.
Automatyczny fokus ma swoją cenę. Przeglądarka przewija stronę do elementu, więc użytkownik czytnika ekranu może przegapić wszystko, co stoi wyżej, a na telefonie fokus w polu tekstowym może od razu wysunąć klawiaturę i zasłonić pół ekranu. Przeglądarki pomijają też autofocus w ramkach osadzonych z innej domeny i wtedy, gdy użytkownik zdążył już przenieść fokus gdzie indziej.
Składnia
#<element autofocus>…</element>Więcej przykładów
#<dialog id="remove-dialog">
<p>Usunąć kurs „Python od zera” z ulubionych?</p>
<form method="dialog">
<button value="remove">Usuń</button>
<button value="cancel" autofocus>Anuluj</button>
</form>
</dialog>
<button type="button" onclick="document.getElementById('remove-dialog').showModal()">
Usuń z ulubionych
</button>Po otwarciu okna fokus trafia na przycisk „Anuluj”, więc przypadkowe naciśnięcie Enter niczego nie usunie.
Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Nie dawaj
autofocuspolu w środku długiej strony. Użytkownik trafi od razu do połowy treści i nie będzie wiedział, co pominął. - Gdy fokus ma się przenieść po działaniu użytkownika, np. po kliknięciu „Edytuj”, wywołaj w skrypcie
element.focus(). - W React atrybut zapisujesz jako
autoFocus. React sam wywołuje wtedyfocus(), gdy element pojawi się na stronie.
Powiązane hasła
#- <input>Pole formularza: tekst, e-mail, hasło, liczba, data, suwak, pole wyboru, plik i wiele innych.
- <dialog>Okno dialogowe albo modal: potwierdzenie, formularz lub komunikat nad resztą strony.
- popoverZamienia element w wyskakujące okienko otwierane przyciskiem, bez JavaScriptu.
- tabindexDecyduje, czy element da się zaznaczyć klawiszem Tab i w jakiej kolejności.
- accesskeySkrót klawiaturowy, który przenosi fokus do elementu albo od razu go aktywuje.
Widzisz błąd albo brakuje przykładu? Napisz do nas.