Автокапитализация для мобильных устройств

Paul Kinlan

Это может показаться самой не впечатляющей функцией из существующих, но я думаю, что это важно, потому что всем не нравится печатать на мобильном телефоне: вы ненавидите это, я ненавижу это. В Chrome для Android (до версии Chrome 43 – бета-версия по состоянию на апрель 2015 года) разработчик практически не контролирует, как браузер может помочь пользователю вводить текст. Если вы сегодня печатаете на устройстве, это может выглядеть так:

Обратите внимание, что все написано строчными буквами, за исключением некоторых значений, которые Android распознает как имена.

Apple представила атрибут для HTMLInputElement и HTMLTextAreaElement , называемый autocapitalize в iOS 5 , и он позволяет автору страницы подсказать, как браузер должен отображать виртуальную клавиатуру для пользователя, чтобы оптимизировать ввод текста для пользователя. В простейшей форме вы можете указать, что текстовое поле должно автоматически делать заглавной первую букву каждого нового предложения.

Начиная с Chrome 43, Chrome будет поддерживать атрибут autocapitalize как в HTMLInputElement , так и HTMLTextAreaElement , что позволит вам контролировать поведение автокапитализации виртуальной клавиатуры и интегрировать его с Safari на iOS.

autocapitalize будет применяться только к объектам HTMLInputElement , для которых атрибут type имеет значение: type="text" , type="search" , type="url" , type="tel" , type="email" или type="password" . По умолчанию автокапитализация не используется.

Вот простой пример, позволяющий автокапитализировать предложения в текстовой области:

<textarea autocapitalize="sentences">

Какие значения может принимать автокапитализация?

В следующей таблице показаны различные состояния, в которых может находиться элемент ввода:

	Состояние	Ключевые слова
<input> <input autocapitalize=off>	Без капитализации	нет [по умолчанию]
		выключенный
<input autocapitalize=characters>	Использование заглавных букв символов	персонажи
<input autocapitalize=words>	Заглавные буквы слов	слова
<input autocapitalize=sentences>	Заглавные буквы предложений	предложения

Для HTMLInputElement недопустимым значением по умолчанию является Sentences Capitalization , если тип элемента — type= text или type= search . В противном случае это «Без капитализации» .

• <input autocapitalize="simon"> будет текстовым полем с заглавными буквами.
• <input type="email" autocapitalize="simon"> будет текстовым полем без капитализации .
• <input> будет текстовым полем без капитализации .

Для HTMLTextAreaElement недопустимым значением по умолчанию является Sentences Capitalization . Это изменение поведения по умолчанию.

• <textarea autocapitalize="terry"></textarea> будет текстовой областью с заглавными буквами.
• <textarea></textarea> будет текстовой областью с заглавными буквами .
• <textarea autocapitalize="none"></textarea> будет текстовой областью без использования заглавных букв .

Для HTMLFormElement мы решили не реализовывать этот атрибут, поскольку обнаружили, что сегодня он редко используется на страницах, а когда он используется, то в основном используется для полного отключения автокапитализации в форме:

<form autocapitalize=off><input></form>

Вышеупомянутое является странным, поскольку состояние по умолчанию для HTMLInputElement — «Без заглавных букв» .

Почему вы используете это вместо inputmode ?

inputmode предназначен, среди прочего, для решения проблем того же типа. Однако ему не хватает реализации в браузере — насколько нам известно, только Firefox OS имеет реализацию и имеет префикс (x-inputmode) — но он также очень мало используется в Интернете. С другой стороны, autocapitalize уже используется на миллионах страниц сотен тысяч веб-сайтов.

Когда мне следует это использовать?

Это не исчерпывающий список случаев, когда следует использовать autocapitalize ; однако есть ряд мест, где помощь пользователю в вводе текста имеет большое значение:

• Используйте autocapitalization=words если хотите.
  • Ожидание имен людей (примечание: не все имена следуют этому правилу, но большинство западных имен будут автоматически писаться с заглавной буквы, как и ожидалось)
  • Названия компаний
  • Адреса
• Используйте autocapitalization=characters , если вы ожидаете:
  • штаты США
  • Почтовые индексы Великобритании
• Используйте sentences для элементов ввода, если вы ожидаете, что контент будет введен в обычной форме абзаца — например, сообщение в блоге.
• Используйте none в TextAreas, если вы ожидаете содержимое, которое не должно быть затронуто, например ввод кода.
• Если вам не нужны подсказки, не добавляйте автокапитализацию.

Другие интересные ссылки

• Оригинальное предложение по реализации Мунира Ламури.