Это может показаться самой не впечатляющей функцией из существующих, но я думаю, что это важно, потому что всем не нравится печатать на мобильном телефоне: вы ненавидите это, я ненавижу это. В Chrome для Android (до версии Chrome 43 – бета-версия по состоянию на апрель 2015 года) разработчик практически не контролирует, как браузер может помочь пользователю вводить текст. Если вы сегодня печатаете на устройстве, это может выглядеть так:
Обратите внимание, что все написано строчными буквами, за исключением некоторых значений, которые Android распознает как имена.
Apple представила в iOS 5 атрибут HTMLInputElement
и HTMLTextAreaElement
, называемый autocapitalize , и он позволяет автору страницы подсказать, как браузер должен представлять пользователю виртуальную клавиатуру, чтобы оптимизировать ввод текста для пользователя. В простейшей форме вы можете указать, что текстовое поле должно автоматически делать заглавной первую букву каждого нового предложения.
Начиная с 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, если вы ожидаете содержимое, которое не должно быть затронуто, например ввод кода. - Если вам не нужны подсказки, не добавляйте автокапитализацию.