Привет, Хабр! Представляю вашему вниманию перевод статьи «Everything You Ever Wanted to Know About inputmode» Christian Oliff.
Примечание переводчика: Первоначальное название статьи «Всё, что вы когда-либо хотели знать об inputmode» изменено на «Особенности атрибута inputmode для мобильных ОС и браузеров», так как второе точнее передаёт суть.
Глобальный атрибут inputmode подсказывает браузерам для устройств с экранной клавиатурой, какой вариант демонстрировать, когда пользователь выбрал элемент input или textarea.
В отличие от изменения type формы, inputmode не меняет способа, которым браузер интерпретирует input – он даёт браузеру инструкцию, какую клавиатуру вывести на экран.
У атрибута inputmode долгая история, но лишь совсем недавно он был принят ведущими мобильными браузерами: Сафари для iOS и Хром для Android. Раньше он был воплощён в жизнь в Firefox для Андроида в 2012 году, но впоследствии, через несколько месяцев, удалён (хотя всё ещё доступен через флаг). Спустя почти шесть лет, Хром для Андроида встроил это свойство, и с последним релизом iOS 12.2, Сафари его тоже поддерживает.
Поддержку атрибута браузерами можно посмотреть здесь. Цифры означают версию браузера.
Прежде, чем мы углубимся в суть дела, следует иметь в виду, что WHATWG living standard предоставляет документацию inputmode, тогда как W3C 5.2 spec больше не содержит её. Так как WHATWG документирует атрибут, и браузеры работают над его поддержкой, мы будем рассматривать технические характеристики WHATWG как стандарт.
Inputmode принимает несколько значений. Давайте рассмотрим их по очереди.
Начнем с него, так как, возможно, нам не понадобится никакая клавиатура. Использование inputmode=”none” не будет показывать клавиатуру в Хроме для Андроид. iOS 12.2 будет выводить по умолчанию свою алфавитно-цифровую клавиатуру, таким образом, характеристика none в этом случае могла бы быть для iOS чем-то вроде сброса настроек.
Это, возможно, одно из самых распространённых значений inputmode, так как оно идеально для полей ввода, которые требуют только чисел – например, пин-коды, почтовые индексы, номера кредитных карт, и т.д. Использование numeric с type=”text” может иметь больше смысла, чем переключение ввода на type=”number”, потому что inputmode=”numeric” может использоваться с атрибутами maxlength, minlength и pattern, делая его более универсальным для разных случаев.
Я часто видел сайты, применяющие type=«tel» в инпуте, чтобы вывести цифровую клавиатуру. Это рассматривается, как обходной путь, но семантически не является корректным.
Помните, что inputmode поддерживает атрибут pattern, мы можем добавить pattern=”\d*” к input для того же эффекта. Используйте это, если вы уверены, что инпут должен позволять вводить только цифры, потому что Андроид (в отличие от iOS) не разрешает пользователю обращаться к клавиатуре с буквами, что могло бы случайно помешать ввести валидные данные.
Введение телефонного номера с помощью стандартной алфавитно-цифровой клавиатуры может вызывать трудности. На телефонной клавиатуре каждая кнопка с цифрой (кроме 1 и 0) представляет три буквы (например, 2 представляет А, В и С), которые расположены на той же клавише. Алфавитно-цифровая клавиатура не ссылается на эти буквы, так что декодирование телефонного номера, содержащего буквы (например, 1-800-COLLECT) требует дополнительных ресурсов.
Использование inputmode с переключением на tel выведет стандартную телефонную клавиатуру, включая кнопки для цифр от 0 до 9, символы решётки и звёздочки. Плюс у нас будут алфавитные мнемонические символы (например АВС).
Поле inputmode с переключением на decimal приводит к небольшим изменениям для iOS, где клавиатура выглядит так же, как и в случае tel, но знаки +*# заменяются десятичной точкой. Андроид будет просто использовать цифровую клавиатуру.
#Email
Я уверен, что вы заполняли форму, которая требует введения электронного адреса, что вынуждало к переключению клавиатуры только лишь для доступа к символу @. Это не смертельно, но конечно, не слишком удобно. Вот где пригодится значение email. Оно добавляет символ @ и десятичную точку.
Такая клавиатура может быть полезной для тех, кому необходимо ввести имя пользователя в Твиттере, так как @ — основной символ для идентификации пользователей в этой соцсети. Другая причина употребления может быть, если у вас есть собственный скрипт для проверки email, и вы не хотите использовать встроенную в браузер функцию валидации.
Значение URL позволяет проще всего добавить расширение имени домена (например, .com) путём нажатия одной кнопки; также присутствуют кнопки, которые обычно используются для веб-адресов, например, символы (.) и (/). Расширение, показанное на клавиатуре, прибавляется к записи пользователя.
Такая клавиатура может быть полезной, чтобы показать юзерам, что ваше поле ввода принимает доменные имена (site.com) а также полные доменные адреса (https://site.com).
Используйте type=”url”, если ваше поле ввода требует валидации введённых символов.
Это значение выводит голубую кнопку Go на iOS и зелёную Enter на Андроиде, обе на месте Return. Как вы, возможно, догадались по названию, search используется для форм поиска, предоставляя клавишу для производства запроса.
Если вы хотели бы показать Search вместо Enter в iOS и иконку с увеличительным стеклом на Андроиде вместо зелёной стрелки, используйте type=”search”.
Примечание переводчика: Первоначальное название статьи «Всё, что вы когда-либо хотели знать об inputmode» изменено на «Особенности атрибута inputmode для мобильных ОС и браузеров», так как второе точнее передаёт суть.
Глобальный атрибут inputmode подсказывает браузерам для устройств с экранной клавиатурой, какой вариант демонстрировать, когда пользователь выбрал элемент input или textarea.
<input type="text" inputmode="" />
<textarea inputmode="" />В отличие от изменения type формы, inputmode не меняет способа, которым браузер интерпретирует input – он даёт браузеру инструкцию, какую клавиатуру вывести на экран.
У атрибута inputmode долгая история, но лишь совсем недавно он был принят ведущими мобильными браузерами: Сафари для iOS и Хром для Android. Раньше он был воплощён в жизнь в Firefox для Андроида в 2012 году, но впоследствии, через несколько месяцев, удалён (хотя всё ещё доступен через флаг). Спустя почти шесть лет, Хром для Андроида встроил это свойство, и с последним релизом iOS 12.2, Сафари его тоже поддерживает.
Поддержку атрибута браузерами можно посмотреть здесь. Цифры означают версию браузера.
Прежде, чем мы углубимся в суть дела, следует иметь в виду, что WHATWG living standard предоставляет документацию inputmode, тогда как W3C 5.2 spec больше не содержит её. Так как WHATWG документирует атрибут, и браузеры работают над его поддержкой, мы будем рассматривать технические характеристики WHATWG как стандарт.
Inputmode принимает несколько значений. Давайте рассмотрим их по очереди.
#None
<input type="text" inputmode="none" />Начнем с него, так как, возможно, нам не понадобится никакая клавиатура. Использование inputmode=”none” не будет показывать клавиатуру в Хроме для Андроид. iOS 12.2 будет выводить по умолчанию свою алфавитно-цифровую клавиатуру, таким образом, характеристика none в этом случае могла бы быть для iOS чем-то вроде сброса настроек.
#Numeric
<input type="text" inputmode="numeric" /> Это, возможно, одно из самых распространённых значений inputmode, так как оно идеально для полей ввода, которые требуют только чисел – например, пин-коды, почтовые индексы, номера кредитных карт, и т.д. Использование numeric с type=”text” может иметь больше смысла, чем переключение ввода на type=”number”, потому что inputmode=”numeric” может использоваться с атрибутами maxlength, minlength и pattern, делая его более универсальным для разных случаев.
Я часто видел сайты, применяющие type=«tel» в инпуте, чтобы вывести цифровую клавиатуру. Это рассматривается, как обходной путь, но семантически не является корректным.
Помните, что inputmode поддерживает атрибут pattern, мы можем добавить pattern=”\d*” к input для того же эффекта. Используйте это, если вы уверены, что инпут должен позволять вводить только цифры, потому что Андроид (в отличие от iOS) не разрешает пользователю обращаться к клавиатуре с буквами, что могло бы случайно помешать ввести валидные данные.
#Tel
<input type="text" inputmode="tel" />Введение телефонного номера с помощью стандартной алфавитно-цифровой клавиатуры может вызывать трудности. На телефонной клавиатуре каждая кнопка с цифрой (кроме 1 и 0) представляет три буквы (например, 2 представляет А, В и С), которые расположены на той же клавише. Алфавитно-цифровая клавиатура не ссылается на эти буквы, так что декодирование телефонного номера, содержащего буквы (например, 1-800-COLLECT) требует дополнительных ресурсов.
Использование inputmode с переключением на tel выведет стандартную телефонную клавиатуру, включая кнопки для цифр от 0 до 9, символы решётки и звёздочки. Плюс у нас будут алфавитные мнемонические символы (например АВС).
#Decimal
<input type="text" inputmode="decimal" />Поле inputmode с переключением на decimal приводит к небольшим изменениям для iOS, где клавиатура выглядит так же, как и в случае tel, но знаки +*# заменяются десятичной точкой. Андроид будет просто использовать цифровую клавиатуру.
<input type="text" inputmode="email" />Я уверен, что вы заполняли форму, которая требует введения электронного адреса, что вынуждало к переключению клавиатуры только лишь для доступа к символу @. Это не смертельно, но конечно, не слишком удобно. Вот где пригодится значение email. Оно добавляет символ @ и десятичную точку.
Такая клавиатура может быть полезной для тех, кому необходимо ввести имя пользователя в Твиттере, так как @ — основной символ для идентификации пользователей в этой соцсети. Другая причина употребления может быть, если у вас есть собственный скрипт для проверки email, и вы не хотите использовать встроенную в браузер функцию валидации.
#URL
<input type="text" inputmode="url" />Значение URL позволяет проще всего добавить расширение имени домена (например, .com) путём нажатия одной кнопки; также присутствуют кнопки, которые обычно используются для веб-адресов, например, символы (.) и (/). Расширение, показанное на клавиатуре, прибавляется к записи пользователя.
Такая клавиатура может быть полезной, чтобы показать юзерам, что ваше поле ввода принимает доменные имена (site.com) а также полные доменные адреса (https://site.com).
Используйте type=”url”, если ваше поле ввода требует валидации введённых символов.
#Search
<input type="text" inputmode="search" />Это значение выводит голубую кнопку Go на iOS и зелёную Enter на Андроиде, обе на месте Return. Как вы, возможно, догадались по названию, search используется для форм поиска, предоставляя клавишу для производства запроса.
Если вы хотели бы показать Search вместо Enter в iOS и иконку с увеличительным стеклом на Андроиде вместо зелёной стрелки, используйте type=”search”.
# О чём ещё нужно знать
- Для Сhromium-браузеров на Андроиде, таких как Microsoft Edge, Brave и Opera характерно такое же поведение inputmode, как и для Chrome.
- Я не коснулся клавиатур на iPad из соображений краткости. Они аналогичны iPhone, только включают больше кнопок. То же самое справедливо для планшетов Андроид, за исключением сторонних клавиатур, что может быть отдельной темой, которую стоит осветить.
- Первоначально предложенная спецификация имела значения kana и katakana для японского ввода, но они никогда не были реализованы в каком-либо браузере и поэтому упразднены.
- Latin-name также первоначально было одним из значений inputmode и было удалено. Интересно, что, если использовать его сейчас в Сафари на iOS, оно выведет имя пользователя над клавиатурой.
