Skup uwagę na mnie, czyli atrybut focus

W rozdziale:

Pola z automatycznym fokusem

Obsługa automatycznego fokusu
IE	Firefox	Safari	Chrome	Opera	iPhone	Android
10.0+	4.0+	4.0+	3.0+	10.0+	·	3.0+

Aby automatycznie przenieść kursor do wybranego pola formularza na stronie, można użyć JavaScriptu. Przykładowo na stronie głównej Google.com kursor jest automatycznie przenoszony do pola wyszukiwania, aby od razu po wejściu można było rozpocząć wpisywanie szukanej frazy. Podczas gdy dla większości użytkowników jest to bardzo wygodne, niektórym zaawansowanym i nietypowym użytkownikom może to przeszkadzać. Jeśli ktoś naciśnie spację spodziewając się przewinięcia strony, to będzie zawiedziony, ponieważ jego czynność zostanie wykonana w polu formularza. (Po prostu w polu tym zostanie wpisana spacja). Jeśli podczas ładowania strony klikniemy w jakimś polu formularza, to po zakończeniu wczytywania strony „pomocny” skrypt może z powrotem przenieść kursor do domyślnego pola, przez co przeszkodzi nam w pracy i spowoduje, że będziemy pisać w niewłaściwym miejscu.

Jako że funkcja ta jest realizowana poprzez JavaScript, może być trudno zaprogramować obsługę tych wszystkich nietypowych przypadków, a osoby które nie chcą, aby „kradziono” im kursor w ogóle nie mają zbyt wielu możliwości obrony.

Rozwiązaniem tego problemu w języku HTML5 jest atrybut autofocus dla wszystkich elementów formularza. Działanie tego atrybutu jest dokładnie takie, na jakie wskazuje jego nazwa: po zakończeniu wczytywania strony przeglądarka uaktywnia do przyjmowania danych określone pole. Dzięki temu, że funkcja ta jest realizowana poprzez kod HTML, a nie skrypty, działa jednakowo na wszystkich stronach. Ponadto producenci przeglądarek (albo twórcy rozszerzeń) mogą udostępnić użytkownikom opcję wyłączenia tej funkcji.

Oto jak można ustawić pole formularza na automatyczny fokus:

<form>
  <input name="q" autofocus>
  <input type="submit" value="Szukaj">
</form>

Przeglądarki nie obsługujące atrybutu autofocus zwyczajnie go zignorują. Sprawdź czy twoja przeglądarka obsługuje atrybut autofocus.

Cóż to? Mówisz, że chcesz aby automatyczny fokus działał we wszystkich przeglądarkach, a nie tylko paru dziwadłach obsługujących HTML5? Możesz zachować skrypt, którego używałeś do tej pory. Wystarczy tylko dokonać dwóch drobnych zmian:

dodaj atrybut autofocus do kodu HTML;
Sprawdź czy przeglądarka obsługuje atrybut autofocus i uruchamiaj swój skrypt tylko, gdy przeglądarka nie obsługuje tego atrybutu.

Automatyczny fokus z wyjściem awaryjnym

<form name="f">
  <input id="q" autofocus>
  <script>
    if (!("autofocus" in document.createElement("input"))) {
      document.getElementById("q").focus();
    }
  </script>
  <input type="submit" value="Zatwierdź">
</form>
…

Zobacz przykład użycia atrybutu autofocus z wyjściem awaryjnym.

Jak najszybsze ustawianie fokusu

Na wielu stronach fokus jest ustawiany dopiero po zdarzeniu window.onload. Ale zdarzenie to ma miejsce dopiero po załadowaniu wszystkich obrazów. Jeśli na stronie znajduje się dużo obrazów, to skrypt ustawiający fokus może „zabrać” fokus z innego elementu, z którego użytkownik zaczął już korzystać. Dlatego właśnie zaawansowani użytkownicy tak nie lubią automatycznego fokusu.

W powyższym przykładzie skrypt automatycznego fokusu został umieszczony bezpośrednio za polem formularza, którego dotyczy. Jest to najlepsze rozwiązanie, ale u niektórych może wywoływać opory związane z umieszczaniem bloków kodu JavaScript w środku strony. (Albo bardziej przyziemny powód: system może być za mało elastyczny na takie zabawy.) Jeśli nie możesz wstawić skryptu w środku strony, powinieneś fokus ustawić podczas własnego zdarzenia, jak choćby $(document).ready() jQuery, zamiast po zdarzeniu window.onload.

Automatyczny fokus z pomocą jQuery

<head>
<script src="jquery.min.js"></script>
<script>
  $(document).ready(function() {
    if (!("autofocus" in document.createElement("input"))) {
      $("#q").focus();
    }
  });
</script>
</head>
<body>
<form name="f">
  <input id="q" autofocus>
  <input type="submit" value="Zatwierdź">
</form>

Zobacz przykład użycia atrybutu autofocus z pomocą jQuery.

jQuery zgłasza swoje zdarzenie ready w chwili, gdy dostępne staje się drzewo DOM strony — tzn. czeka na wczytanie tekstu, ale nie czeka na wczytanie wszystkich obrazów. Nie jest to optymalne rozwiązanie — jeśli strona będzie bardzo obszerna albo połączenie sieciowe bardzo powolne, to użytkownik i tak będzie miał okazję zacząć coś robić, zanim zostanie uruchomiony skrypt fokusu. Ale jest to o wiele lepsze niż czekanie na zdarzenie window.onload.

Jeśli możesz wstawić jedną instrukcję do swojego kodu HTML, to istnieje jeszcze trzecie rozwiązanie, które nie ma wady pierwszego i jest lepsze od drugiego z dotychczas opisanych. Możesz zdefiniować własne zdarzenie jQuery, np. autofocus_ready. Później możesz to zdarzenie wyzwolić ręcznie natychmiast gdy interesujące cię pole stanie się dostępne. Dziękuję E. M. Sternbergowi za nauczenie mnie tej techniki.

Automatyczny fokus z pomocą własnego zdarzenia

<head>
<script src="jquery.min.js"></script>
<script>
  $(document).bind('autofocus_ready', function() {
    if (!("autofocus" in document.createElement("input"))) {
      $("#q").focus();
    }
  });
</script>
</head>
<body>
<form name="f">
  <input id="q" autofocus>
  <script>$(document).trigger('autofocus_ready');</script>
  <input type="submit" value="Zatwierdź">
</form>

Zobacz przykład użycia atrybutu autofocus z pomocą własnego zdarzenia.

To jest najlepsze rozwiązanie. Fokus zostanie ustawiony najszybciej jak to możliwe, zanim zakończy się wczytywanie tekstu. Ale w tym przypadku logika fokusu zostaje przeniesiona do nagłówka strony. W tym przykładzie została użyta biblioteka jQuery, ale koncepcja zdarzeń nie jest jej wyłączną cechą. Podobne możliwości stwarzają inne biblioteki JavaScript, np. YUI i Dojo.

Podsumujmy:

Poprawne ustawianie fokusu jest ważne.
Jeśli jest taka możliwość, należy skorzystać z atrybutu autofocus pola formularza, aby przeglądarka sama ten fokus ustawiła.
Jeśli interesuje cię też obsługa w starszych przeglądarkach, sprawdź obsługę atrybutu autofocus, aby skrypt awaryjny był wykonywany tylko w tych starych programach.
Ustaw fokus najszybciej jak to możliwe. Wstaw skrypt obsługi fokusu bezpośrednio za polem formularza, którego dotyczy. Jeśli to stanowi gwałt na twoim poczuciu estetyki, użyj biblioteki pozwalającej tworzyć własne zdarzenia i wyzwalaj własne zdarzenie bezpośrednio za polem formularza. Jeżeli to niemożliwe, użyj czegoś w rodzaju zdarzenia $(document).ready() jQuery.
Pod żadnym pozorem nie należy czekać z ustawieniem fokusu na zdarzenie window.onload.