Może się to wydawać najmniej imponującą funkcją, jaka istnieje, ale myślę, że jest ważna, ponieważ każdy lubi pisać na urządzeniach mobilnych – po prostu jej nie znoszę. W Chrome na Androida (przed wersją 43 – od kwietnia 2015 r.) deweloper ma ograniczoną kontrolę nad tym, w jaki sposób przeglądarka może pomagać użytkownikowi w wpisywaniu tekstu. Jeśli dzisiaj piszesz na urządzeniu, może to wyglądać tak:
Zwróć uwagę, że wszystkie znaki są pisane małymi literami poza niektórymi wartościami, które Android rozpoznał jako nazwę.
Firma Apple wprowadziła w systemie iOS 5 atrybut HTMLInputElement
oraz HTMLTextAreaElement
nazwany automatyczne wielkie litery na iOS 5, który umożliwia autorowi strony zoptymalizowanie klawiatury wirtualnej do wyświetlania użytkownikowi tekstu w przeglądarce. W najprostszej formie możesz określić, że każde nowe zdanie w polu tekstowym powinno automatycznie zaczynać się wielką literą.
Od wersji Chrome 43 Chrome będzie obsługiwać atrybut autocap w przeglądarkach HTMLInputElement
i HTMLTextAreaElement
, co pozwoli Ci sterować działaniem tej funkcji na klawiaturze wirtualnej oraz stosować ją w przeglądarce Safari w iOS.
Ustawienie autowielkie będzie stosowane tylko do tych znaków HTMLInputElement
, które mają atrybut type ustawiony na: type="text"
, type="search"
, type="url"
, type="tel"
,
type="email"
lub type="password"
. Domyślnie nie jest ono włączone wielkimi literami.
Oto prosty przykład, w którym można automatycznie wstawiać wielkie litery w obszarze tekstowym:
<textarea autocapitalize="sentences">
Jakie wartości może przyjmować automatyczne wielkie litery?
W tabeli poniżej znajdziesz różne stany elementu wejściowego:
Stan | Słowa kluczowe | |
---|---|---|
<input> <input autocapitalize=off>
|
Bez wielkich liter | brak [wartość domyślna] |
wyłączono | ||
<input autocapitalize=characters> |
Użycie wielkich liter | znaków |
<input autocapitalize=words> |
Wielkie litery w słowach | słowa |
<input autocapitalize=sentences> |
Wielkie litery w zdaniach | zdania |
W przypadku elementu HTMLInputElement
nieprawidłowa wartość domyślna to wielkie litery w zdaniu, jeśli typ elementu to type=text
lub type=search
. W przeciwnym razie jest to Brak wielkich liter.
<input autocapitalize="simon">
to pole tekstowe z wielkimi literami w zdaniach<input type="email" autocapitalize="simon">
to pole tekstowe Bez wielkich liter.<input>
to pole tekstowe Bez wielkich liter.
Nieprawidłowa wartość domyślna w polu HTMLTextAreaElement
: Wielkość liter w Zdaniach. Jest to zmiana w stosunku do działania domyślnego.
<textarea autocapitalize="terry"></textarea>
to obszar tekstowy z wielkimi literami w zdaniach<textarea></textarea>
to obszar tekstowy z wielkimi literami w zdaniu.<textarea autocapitalize="none"></textarea>
to pole tekstowe Bez wielkich liter.
Zdecydowaliśmy się nie implementować tego atrybutu w przypadku atrybutu HTMLFormElement
, ponieważ okazało się, że jest on obecnie rzadko używany na stronach, a gdy jest używany, najczęściej powoduje całkowite wyłączenie automatycznego wstawiania wielkich liter w formularzu:
<form autocapitalize=off><input></form>
Ta odpowiedź jest dziwna, bo domyślny stan HTMLInputElement
to Bez wielkich liter.
Dlaczego używasz tego w ponad inputmode
?
inputmode
ma na celu m.in. rozwiązywanie tego samego rodzaju problemów.
Jednak brakuje implementacji przeglądarek.
Według naszej wiedzy, tylko Firefox OS ma implementacje i ma przedrostek (x-inputmode), ale jest ona bardzo rzadko używana w internecie. Z drugiej strony autocapitalize
jest używany na milionach stron na setkach tysięcy witryn.
Kiedy należy go używać?
To nie jest wyczerpująca lista sytuacji, w których należy używać atrybutu autocapitalize
. Jest jednak wiele miejsc, w których pomoc użytkownikom w wprowadzaniu tekstu jest bardzo przydatna:
- Użyj konta
autocapitalization=words
, jeśli:- Oczekiwanie na imiona i nazwiska (uwaga: nie wszystkie nazwy są zgodne z tą zasadą, ale większość nazw zachodnich będzie zaczynać się automatycznie zgodnie z oczekiwaniami)
- Nazwy firm
- Adresy
- Użyj atrybutu
autocapitalization=characters
, jeśli oczekujesz:- Stany w USA
- Brytyjskie kody pocztowe
- Jeśli spodziewasz się treści w postaci zwykłego akapitu, np. posta na blogu, użyj elementu
sentences
. - Użyj atrybutu
none
w TextAreas, jeśli spodziewasz się treści, których nie powinien dotyczyć problem, na przykład wpisując kod. - Jeśli nie chcesz korzystać z podpowiedzi, nie dodawaj wielkich liter.