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

Пол Кинлан

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

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

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

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

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

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

<textarea autocapitalize="sentences">

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

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

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

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

  • <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 является No Capitalization .

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

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

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

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

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