Może się wydawać, że to najmniej imponująca funkcja, ale uważam, że jest ważna, ponieważ nikt nie lubi pisać na urządzeniach mobilnych: Ty nienawidzisz tego, ja nienawidzę tego. W Chrome na Androida (w wersji wcześniejszej niż Chrome 43 – wersja beta z kwietnia 2015 r.) deweloper ma niewielką kontrolę nad tym, jak przeglądarka może pomagać użytkownikowi w wprowadzaniu tekstu. Jeśli obecnie piszesz na urządzeniu, może to wyglądać tak:
Zwróć uwagę, że wszystkie znaki są małe, z wyjątkiem niektórych wartości, które Android rozpoznał jako nazwy.
W iOS 5 firma Apple wprowadziła atrybut HTMLInputElement
i HTMLTextAreaElement
o nazwie autocapitalize, który pozwala autorowi strony zasugerować przeglądarce, jak powinna wyświetlać użytkownikowi klawiaturę wirtualną, aby zoptymalizować wprowadzanie tekstu przez użytkownika. W najprostszej formie możesz wskazać, że pole tekstowe powinno automatycznie robić wielką literę na początku każdego nowego zdania.
Od wersji 43 Chrome będzie obsługiwać atrybut autocapitalization zarówno w przypadku HTMLInputElement
, jak i HTMLTextAreaElement
, co pozwoli Ci kontrolować automatyczne stosowanie wielkich liter na klawiaturze wirtualnej i dostosować ją do standardów Safari na iOS.
Opcja autocapitalization będzie miała zastosowanie tylko do HTMLInputElement
, które mają atrybut type ustawiony na: type="text"
, type="search"
, type="url"
, type="tel"
, type="email"
lub type="password"
. Domyślnie nie używa się automatycznego wielkości liter.
Oto prosty przykład automatycznego stosowania wielkich liter w tekstach:
<textarea autocapitalize="sentences">
Jakie wartości może przyjmować automatyczne użycie wielkich liter?
W tabeli poniżej przedstawiono różne stany, w których może znajdować się element wejściowy:
Stan | Słowa kluczowe | |
---|---|---|
<input> <input autocapitalize=off>
|
Bez użycia wielkich liter | brak [domyślnie] |
wył. | ||
<input autocapitalize=characters> |
Użycie wielkich liter | znaków |
<input autocapitalize=words> |
Użycie wielkich liter | słowa |
<input autocapitalize=sentences> |
Pisownia wielkimi literami w zdaniach | zdania |
W przypadku HTMLInputElement
domyślną nieprawidłową wartością jest Znaczniki wielkości liter, jeśli typ elementu to type=text
lub type=search
. W przeciwnym razie jest to Brak wielkości liter.
<input autocapitalize="simon">
to pole tekstowe z wielkimi literami w zdaniach.<input type="email" autocapitalize="simon">
to pole tekstowe z brak wielkości liter.<input>
to pole tekstowe z brak wielkości liter.
W przypadku parametru HTMLTextAreaElement
domyślną nieprawidłową wartością jest Sentences
Capitalization. Jest to zmiana w stosunku do zachowania domyślnego.
<textarea autocapitalize="terry"></textarea>
to obszar tekstowy z wielkimi literami w zdaniach.<textarea></textarea>
to obszar tekstowy z wielkością liter.<textarea autocapitalize="none"></textarea>
to obszar tekstowy z brakiem użycia wielkich liter.
W przypadku atrybutu HTMLFormElement
zdecydowaliśmy się go nie wdrażać, ponieważ obecnie jest on rzadko używany na stronach, a gdy już jest, służy głównie do całkowitego wyłączenia automatycznego pisania wielkimi literami w formularzu:
<form autocapitalize=off><input></form>
Powyższe jest dziwne, ponieważ domyślny stan dla HTMLInputElement
to Brak wielkości liter.
Dlaczego używasz tego zamiast inputmode
?
inputmode
ma między innymi rozwiązywać ten sam typ problemu.
Nie udało się jednak wdrożyć go w przeglądarkach – według naszej najlepszej wiedzy tylko Firefox OS ma implementację z prefiksem (x-inputmode), ale jest ona bardzo rzadko używana w internecie. Z drugiej strony, autocapitalize
jest już używany na milionach stron w setkach tysięcy witryn.
Kiedy warto używać tej funkcji?
Nie jest to wyczerpująca lista sytuacji, w których należy używać tagu autocapitalize
. Jednak w pewnych miejscach pomoc w wprowadzaniu tekstu jest bardzo przydatna:
- Użyj
autocapitalization=words
, jeśli:- nazwy osób (uwaga: nie wszystkie nazwy są zgodne z tą zasadą, ale większość nazw zachodnich będzie automatycznie zapisywana wielkimi literami zgodnie z oczekiwaniami);
- Nazwy firm
- Adresy
- Użyj
autocapitalization=characters
, jeśli oczekujesz:- Stany w USA
- Brytyjskie kody pocztowe
- Jeśli oczekujesz treści wpisywanych w zwykłej formie akapitu, np. posta na blogu, użyj elementu wejścia
sentences
. - Użyj
none
w przypadku pól tekstowych, jeśli chcesz, aby niektóre treści nie były modyfikowane (np. podczas wpisywania kodu). - Jeśli nie chcesz używać podpowiedzi, nie dodawaj autokorekty.