Automatyczne wielkie litery w aplikacjach mobilnych

Paul Kinlan

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.