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 telefonie: 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 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 w elementach HTMLInputElement i HTMLTextAreaElement atrybut autocapitalize, który pozwala autorowi strony zasugerować przeglądarce, jak powinna wyświetlać użytkownikowi klawiaturę wirtualną, aby zoptymalizować wprowadzanie tekstu. 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 HTMLInputElement, jak i HTMLTextAreaElement, co pozwoli Ci kontrolować automatyczne stosowanie wielkich liter na klawiaturze wirtualnej i dostosować je do standardów Safari na iOS.

Autocapitalizacja 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 w zdaniach, jeśli typ elementu to type=text lub type=search. W innym przypadku jest to Brak znaków wielkich.

  • <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. Z najlepszych naszych informacji 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żywane na milionach stron w setkach tysięcy witryn.

Kiedy warto ich używać?

Nie jest to wyczerpująca lista sytuacji, w których należy używać elementu 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 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.