HTML5 - HTML

Zogniskowanie <... autofocus>

W jaki sposób wprowadzić kursor tekstowy do wybranego pola formularza automatycznie po załadowaniu strony?

(interpretuje: Internet Explorer 11, Firefox, Opera, Chrome)

Elementy bez znacznika zamykającego (np. INPUT):
```
<element autofocus>
```
Elementy ze znacznikiem zamykającym (np. TEXTAREA):
```
<element autofocus>...</element>
```

element: Dowolny znacznik HTML 4.01 lub HTML5

Atrybut logiczny (wstawiany bez wartości), dzięki któremu po załadowaniu strony, kursor tekstowy zostanie automatycznie umieszczony w tak zaznaczonym polu formularza.

Chociaż typowym zastosowanie atrybutu autofocus są pola i przyciski formularza - takie jak: INPUT (z wyjątkiem type="hidden"), SELECT, TEXTAREA, BUTTON - to tak naprawdę można go użyć dla dowolnego znacznika. Może to poprawić dostępność strony, doświadczenia użytkownika czy funkcjonalność nawigacji. Częstym zastosowanie może być również użycie go w połączeniu z atrybutem contenteditable="true".

Przykład <input autofocus>

<form action="?" method="post">
	<fieldset>
		<legend>Zaloguj się</legend>
		<input type="text" name="login" autofocus>
		<input type="password" name="password">
		<input type="submit" value="OK">
	</fieldset>
</form>

Pytania i odpowiedzi <input autofocus, button tabindex>

Co to jest funkcja autofocus?

Funkcja autofocus w HTML jest używana do automatycznego ustawienia fokusu na określonym elemencie formularza, takim jak pole tekstowe, gdy strona jest załadowana. Na przykład, używając <input type="text" name="username" autofocus>, przeglądarka automatycznie ustawi kursor w polu username podczas ładowania strony.

Jak ustawić domyślny fokus w HTML?

Domyślny fokus w HTML można ustawić, dodając atrybut autofocus np. do tagu <input>, <textarea> lub <select>. Na przykład, <input type="text" name="search" autofocus> sprawi, że pole wyszukiwania będzie automatycznie zaznaczone po załadowaniu strony.

Jak ustawić fokus na konkretnym elemencie HTML?

Aby ustawić fokus na konkretnym elemencie HTML, należy dodać atrybut autofocus do tego elementu, jak w <input type="text" id="myInput" autofocus>. Można również ustawić fokus programowo za pomocą JavaScript, używając metody focus(), np. document.getElementById('myInput').focus();.

Jak ustawić autofokus na "fałsz" w HTML?

W HTML nie ma bezpośredniego sposobu na ustawienie autofokusu na "fałsz" poprzez atrybuty, ponieważ autofocus działa jako przełącznik, który albo jest włączony, albo nie. Aby programowo usunąć autofocus, można po prostu nie używać atrybutu autofocus lub usunąć go z elementu, lub w kodzie JavaScript ustawić fokus na innym elemencie, co zrezygnuje z autofocusu, np. document.getElementById('otherElement').focus();.

Jak usunąć domyślny fokus na przycisku w HTML?

Aby usunąć domyślny fokus na przycisku w HTML, można użyć atrybutu tabindex="-1" w tagu <button>, co spowoduje, że przycisk nie będzie dostępny do nawigacji za pomocą klawiatury. Na przykład: <button tabindex="-1">Przycisk</button>. Alternatywnie, można usunąć fokus CSS-owo, stosując atrybut style="outline: none" w wybranym znaczniku, albo odpowiednią deklarację w arkuszu stylów - np.: button { outline: none; }, choć to może wpłynąć na dostępność i użyteczność.

Komentarze

Zobacz więcej komentarzy