autocapitalize
Mówi klawiaturze ekranowej, kiedy pisać wielką literą: nigdy, na początku zdania, na początku słowa albo zawsze.
- Dotyczy
- Pola tekstowe
<input>,<textarea>, elementy zcontenteditableoraz<form>jako ustawienie domyślne dla jego pól
Przykład
#<style>
form { display: grid; gap: 10px; max-width: 320px; }
label { display: grid; gap: 4px; }
</style>
<form>
<label>Login <input type="text" name="login" autocapitalize="none" spellcheck="false"></label>
<label>Imię i nazwisko <input type="text" name="name" autocapitalize="words"></label>
<label>Kod rabatowy <input type="text" name="coupon" autocapitalize="characters"></label>
<label>Wiadomość do mentora
<textarea name="message" rows="2" autocapitalize="sentences"></textarea>
</label>
</form>Różnicę zobaczysz tylko na telefonie lub tablecie, gdy zaczniesz pisać na klawiaturze ekranowej. Na komputerze wszystkie pola zachowują się tak samo.
Definicja i zastosowanie
#Atrybut autocapitalize podpowiada klawiaturze ekranowej w telefonie lub tablecie, kiedy włączać wielkie litery. Domyślnie klawiatura zwykle zaczyna wielką literą każde zdanie. W wiadomości to wygodne, ale w polu na login, kod rabatowy czy adres strony przeszkadza, bo użytkownik musi co chwilę poprawiać pierwszą literę.
Na komputerze z fizyczną klawiaturą atrybut niczego nie zmienia. Nie działa też w polach type="email", type="url" i type="password", w których klawiatura i tak sama nie wstawia wielkich liter. Stosujesz go w zwykłych polach tekstowych, w <textarea> i w elementach z contenteditable, a ustawiony na <form> staje się ustawieniem domyślnym dla wszystkich pól w środku.
Wartość words przydaje się przy imionach, nazwiskach i nazwach miast, a characters przy kodach pisanych wielkimi literami, np. numerze rejestracyjnym. To tylko ułatwienie: użytkownik nadal może zmienić wielkość liter ręcznie, więc dane i tak sprawdzaj w kodzie.
Składnia
#<element autocapitalize="none | sentences | words | characters">…</element>Wartości
#none
lub off
Bez automatycznych wielkich liter. Do loginów, kodów, adresów i fragmentów kodu.sentences
lub on
Wielka litera na początku każdego zdania. Zwykle tak działa klawiatura, gdy atrybutu nie ma.words
Wielka litera na początku każdego słowa, np. w imieniu, nazwisku i nazwie miasta.characters
Wszystkie litery wielkie, np. w kodach rabatowych i numerach rejestracyjnych.
Obsługa przeglądarek
#Ograniczona obsługa
Nie wszystkie przeglądarki to obsługują. Sprawdź obsługę, zanim użyjesz tego w produkcji.
Dobre praktyki
#- Atrybut możesz dodawać bez obaw. Przeglądarki, które go nie obsługują, po prostu go pomijają, a na telefonach działa w Safari, Chrome i Firefoksie.
- W polach na login i kody połącz
autocapitalize="none"zespellcheck="false". Klawiatura nie zmieni wtedy pierwszej litery, a przeglądarka nie podkreśli wpisanego tekstu jako błędu.
Powiązane hasła
#- inputmodePodpowiada, jaką klawiaturę ekranową pokazać: z cyframi, z przecinkiem, telefoniczną, do adresu e-mail albo żadną.
- enterkeyhintZmienia napis lub ikonę klawisza Enter na klawiaturze ekranowej, np. na „Szukaj”, „Wyślij” albo „Dalej”.
- spellcheckWłącza lub wyłącza sprawdzanie pisowni w edytowalnym tekście.
- <input>Pole formularza: tekst, e-mail, hasło, liczba, data, suwak, pole wyboru, plik i wiele innych.
- <textarea>Wielowierszowe pole tekstowe na dłuższe wypowiedzi: wiadomości, opinie, opisy.
Widzisz błąd albo brakuje przykładu? Napisz do nas.