Domyślny fokus formularza HTML bez JavaScript

159

Czy można ustawić domyślny fokus wprowadzania danych w formularzu HTML bez używania JavaScript, na przykład:

<html>
  <form>
    Input 1: <input type="text" name="textbox1"/>
    <br/>
    Input 2: <input type="text" name="textbox2"/>
  </form>
</html>

Chcę ustawić domyślny fokus na jedno z pól tekstowych, gdy formularz jest ładowany bez użycia JavaScript (ponieważ chcę, aby zachowanie występowało, gdy użytkownik ma wyłączony js).

html accessibility Adam Jenkin
źródło

Odpowiedzi:

292

Możesz to zrobić w HTML5, ale w innym przypadku musisz użyć JavaScript.

HTML5 umożliwia dodanie autofocusdo elementu formularza, np .:

<input type="text" name="myInput" autofocus />

Działa to w przeglądarkach obsługujących HTML5 (a raczej przeglądarkach, które obsługują tę konkretną część HTML5), ale jak wiesz, nie każdy może jeszcze z niej korzystać.

Jake Lucas
źródło
22

Coś, o czym należy pamiętać ... jeśli ustawisz skoncentrowany element formularza, każdy, kto używa technologii wspomaganej (AT), jak czytnik ekranu, będzie musiał wykonać kopię zapasową, aby zobaczyć menu i wszelkie inne treści znajdujące się przed tym polem.

Moim zdaniem preferowaną metodą jest nie ustawianie fokusu na żadnym polu, z wyjątkiem linku typu skip-link, jeśli jest dostępny. To daje im możliwość przechodzenia do treści strony lub czytania strony od góry do dołu.

Greg
źródło
Dodanie linku pomijającego, który jest również wizualnie ukryty, ale dostępny za pośrednictwem czytników ekranu, byłoby świetne!
James Cazzetta
Muszę się wiele dowiedzieć o dostępności. Dziękujemy za dodanie tej odpowiedzi, która pomoże nam się uczyć!
Andrew Steitz
3

Jak powiedzieli inni, bez Javascript nie można zagwarantować pola domyślnego. Alternatywną opcją, którą możesz wypróbować, jeśli masz wiele pól, do których użytkownik może chcieć uzyskać dostęp, jest użycie accesskeyatrybutu. Zasadniczo oznacza to, że użytkownik może powrócić do któregokolwiek z pól natychmiast później podczas przeglądania, co może być przydatne dla użytkowników czytników ekranu itp.

Artykuł Wikipedii na ten temat jest całkiem przydatny - http://en.wikipedia.org/wiki/Access_key


źródło
0

Nie jest to możliwe bez jakiejś formy skryptów. Nawet strona główna Google wymaga JavaScript, aby ustawić pole wyszukiwania.

Evan Mulawski
źródło
1
To jest. Google po prostu dodaje javascript dla tych przeglądarek, które nie obsługują HTML5. Coś, co warto rozważyć w każdej aplikacji.
mvbrakel
-8

Możesz jednak użyć atrybutu tabindex i użyć najniższej wartości w domyślnym polu tekstowym. Sprawdź tutaj, czy przeglądarka obsługuje:

http://reference.sitepoint.com/html/object/tabindex#compatibilitysection

Witryna to sugeruje

(w prawie wszystkich innych przypadkach - a mianowicie kontrolkach formularzy i linkach - tabindex ma doskonałą obsługę)

Cahit
źródło
3
Atrybut „tabindex” nie nadaje automatycznie fokusu żadnym elementom, nawet elementowi z wartością „tabindex = 1”. Naciśnięcie <tab> (lub kliknięcie) jest wymagane, aby uaktywnić pierwszy element w sekwencji tabulatorów.
Clint Pachl