HTMLElement.
Ustawia fokus na elemencie, np. polu formularza, żeby od razu odbierał klawiaturę. Metoda blur() zdejmuje fokus.
- Zwraca
undefined
Przykład
#const email = document.querySelector('#email')
email.focus()
console.log(document.activeElement === email)
console.log(document.activeElement.id)
email.blur()
console.log(document.activeElement === document.body)true email true
Ten przykład nie uruchamia się w podglądzie, bo przeniósłby fokus z tej strony do ramki z przykładem. Na stronie z polem <input id="email"> wypisuje wynik pokazany powyżej. Po blur() fokus wraca do dokumentu, a document.activeElement wskazuje <body>.
Definicja i zastosowanie
#Metoda focus() przenosi fokus na element, czyli sprawia, że to on odbiera wciśnięcia klawiszy. Pole tekstowe z fokusem pokazuje migający kursor, a przycisk z fokusem zareaguje na Enter i spację. Metoda blur() działa odwrotnie i zdejmuje fokus. Element, który aktualnie ma fokus, odczytasz z document.activeElement.
Fokus mogą dostać elementy interaktywne: pola formularzy, przyciski, linki z atrybutem href oraz elementy z atrybutem tabindex. Wywołanie focus() na zwykłym div czy nagłówku nic nie zrobi, chyba że dodasz mu tabindex="-1". Taki element można aktywować z kodu, ale nie trafia on do kolejności przechodzenia klawiszem Tab.
Przy zmianie fokusu element dostaje zdarzenia focus i blur, które nie bąbelkują, oraz focusin i focusout, które bąbelkują i nadają się do delegowania. Domyślnie przeglądarka przewija stronę tak, żeby element z fokusem był widoczny. Opcja preventScroll: true wyłącza to przewijanie.
Przemyślane użycie focus() poprawia dostępność: po otwarciu okna dialogowego przenieś fokus do jego pierwszego pola, po zamknięciu wróć na przycisk, który je otworzył, a po nieudanym wysłaniu formularza wskaż pierwsze błędne pole. Nie przenoś jednak fokusu bez wyraźnego powodu, bo osoby korzystające z klawiatury i czytników ekranu tracą wtedy orientację.
Składnia
#element.focus()
element.focus(options)
element.blur()
document.activeElementParametry
#options
opcjonalny obiekt
preventScroll: trueustawia fokus bez przewijania strony do elementu.
Więcej przykładów
#const reply = document.querySelector('#reply')
const comment = document.querySelector('#comment')
reply.addEventListener('click', () => comment.focus())
comment.addEventListener('focus', () => console.log('Pole komentarza aktywne'))
comment.addEventListener('blur', () => console.log('Pole komentarza nieaktywne'))
console.log('Aktywny element:', document.activeElement)Na starcie fokus ma sam dokument, czyli <body>. Kliknij „Odpowiedz”, a fokus przejdzie do pola komentarza. Potem kliknij obok pola, żeby zobaczyć zdarzenie blur.
const heading = document.querySelector('#lesson-title')
heading.setAttribute('tabindex', '-1')
heading.focus({ preventScroll: true })
console.log(document.activeElement.tagName)
console.log(heading.tabIndex)H2 -1
Na stronie z nagłówkiem <h2 id="lesson-title"> nagłówek normalnie nie przyjmuje fokusu. tabindex="-1" pozwala aktywować go z kodu, np. po wczytaniu nowej lekcji, dzięki czemu czytnik ekranu od razu odczyta jej tytuł. Element nie trafia przy tym do kolejności klawisza Tab.
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
#- Po otwarciu okna dialogowego przenieś fokus do niego, a po zamknięciu wróć na przycisk, który je otworzył. Osoby korzystające z klawiatury nie zgubią wtedy miejsca na stronie.
- Do delegowania zdarzeń fokusu używaj
focusinifocusout. Zdarzeniafocusiblurnie bąbelkują do rodziców. - Wygląd fokusu ustawiaj w CSS przez
:focus-visible. Obramowanie pojawi się przy obsłudze klawiaturą, a nie po każdym kliknięciu myszą.
Powiązane hasła
#- EventTarget.addEventListener()Rejestruje funkcję wywoływaną za każdym razem, gdy na elemencie wystąpi zdarzenie, np. kliknięcie.
- Element.scrollIntoView()Przewija stronę i przewijane kontenery tak, żeby element pojawił się na ekranie, skokiem albo płynnie.
- Element.setAttribute()Ustawia wartość atrybutu HTML elementu albo dodaje nowy atrybut.
- Event.targetElement, na którym faktycznie wystąpiło zdarzenie, np. kliknięty przycisk wewnątrz listy.
- Element.toggleAttribute()Dodaje atrybut, gdy go nie ma, albo usuwa, gdy jest. Najlepiej sprawdza się przy atrybutach logicznych, takich jak hidden czy disabled.
Widzisz błąd albo brakuje przykładu? Napisz do nas.