Automatyczne wielkie litery w aplikacjach mobilnych

Paul Kinlan

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.