Всё, что нужно знать про inputmode

Глобальный атрибут inputmode подсказывает браузерам устройств с экранными клавиатурами, какой набор кнопок предложить пользователю для удобства ввода в зависимости от типа input или textarea.

<input type="text" inputmode="" />
<textarea inputmode="" />

В отличие от type, inputmode не меняет интерпретацию браузером поля ввода, а только указывает браузеру, какую клавиатуру стоит показать.

Сам атрибут inputmode не новый, но только недавно был принят двумя основными мобильными браузерами: Safari для iOS и Chrome для Android. До этого он был реализован в Firefox для Android еще в 2012 году и через несколько месяцев удален.

Шесть лет спустя в Chrome для Android эта функция была реализована, и начиная с iOS 12.2 Safari тоже стал её поддерживать. Как обычно, уточнить поддержку атрибута браузерами можно на caniuse.com.

Но прежде чем углубляться во все тонкости атрибута, обратим внимание не то, что живой стандарт WHATWG предоставляет документацию для inputmode, а спецификация W3C 5.2 больше не содержит упоминаний о нём, что говорит о том, что он считает его устаревшим. Учитывая, что WHATWG это задокументировало, а разработчики браузеров работали над его поддержкой, осмелимся предположить, что стандартом являются спецификации WHATWG.

inputmode может принимать ряд значений. Рассмотрим их далее.

None

<input type="text"
  inputmode="none" />

Возможно, для ввода нам не понадобится никакой клавиатуры. Использование inputmode=none не будет отображать клавиатуру на Chrome для Android. iOS 12.2 по-прежнему будет отображать буквенно-цифровую клавиатуру по умолчанию, поэтому указание none может быть своего рода сбросом для iOS. В любом случае, none предназначен для контента, который отображает собственное управление с клавиатуры.

Numeric

<input type="text"
  inputmode="numeric" />

Вероятно, это одно из наиболее распространенных значений режима ввода, поскольку оно идеально подходит для input, которые ожидают цифры, а не буквы – ввод PIN-кода, почтовые индексы, номера кредитных карт и т. д. Использование inputmode="numeric" для input type="text" на самом деле может иметь больше смысла, чем установка только input type="number", потому что в этом случае он может использоваться с атрибутами maxlength, minlength и pattern, а это делает его более универсальным для различных вариантов использования.

Значение numeric в Chrome Android (слева) и iOS 12.2 (справа)

Часто можно увидеть сайты, использующие input type=tel для отображения цифровой клавиатуры. Это выглядит как обходной путь, но не будет семантически правильным. Если это вас раздражает, помните, что вместе с inputmode можно использовать шаблоны, т.о. для того же эффекта можно добавить pattern="\d*". Тем не менее, использовать это следует только в том случае, если вы уверены, что input должен разрешать только ввод чисел, поскольку Android (в отличие от iOS) не позволяет пользователю переключаться на клавиатуру для использования букв и это может непреднамеренно помешать пользователям отправлять действительные данные.

Tel

<input type="text"
  inputmode="tel" />

Ввод телефонного номера с использованием стандартной буквенно-цифровой клавиатуры может быть затруднительным. Тут каждая числовая кнопка на телефонной клавиатуре (кроме 1 и 0) содержит три буквы (например, 2 представляет A, B и C), которые отображаются рядом с номером. Буквенно-цифровая клавиатура не ссылается на эти буквы, поэтому расшифровка телефонного номера в некоторых странах, содержащего буквы (например, 1-800-COLLECT), требует больших усилий.

Значение tel в Chrome Android (слева) и iOS 12.2 (справа)

При использовании inputmode с установленным значением tel, будет доступна стандартная телефонная клавиатура, включающая клавиши для цифр от 0 до 9, знак решетки (#) и символ звездочки (*). Кроме того, будут доступны буквенные мнемонические метки (ABC).

Decimal

<input type="text"
  inputmode="decimal" />

Значение decimal в Chrome Android (слева) и iOS 12.2 (справа)

inputmode, с установленным значением decimal, приводит к незначительному изменению в iOS, когда клавиатура выглядит точно так же, как значение tel, но заменяет клавишу + * # простым десятичным (.). С другой стороны, это не повлияет на Android, который будет просто использовать цифровую клавиатуру.

Email

<input type="text"
  inputmode="email" />

Наверное, каждый хотя бы раз заполнял форму, запрашивающую адрес электронной почты. При этом, скорее всего, приходилось менять раскладку клавиатуры и поиск символа @. Это не опасно для жизни или что-то в этом роде, но, безусловно, не очень удобно для использования.

Вот тут и поможет значение email. Оно приводит к появлению символа @ и символа точки (.).

Значение email в Chrome Android (слева) и iOS 12.2 (справа)

Такая клавиатура может быть полезна для людей, которым необходимо ввести имя пользователя Twitter, учитывая, что @ основной символ Twitter для идентификации пользователей. Тем не менее, подсказки с адресом электронной почты, которые iOS отображает над клавиатурой, могут внести смуту.

Другой полезный вариант использования может быть, если у вас есть собственный скрипт проверки электронной почты и вы не желаете использовать встроенную в браузер проверку email.

Url

<input type="text"
  inputmode="url" />

Значение url в Chrome Android (слева) и iOS 12.2 (справа)

Значение url предоставляет пользователям удобный ярлык для добавления доменов верхнего уровня (например, .com или .ru) одной кнопкой, а также кнопок, обычно используемых в веб-адресах, таких как точка (.) И символы косой черты (/). Обычно домен верхнего уровня, отображаемый на клавиатуре, привязан к языку пользователя.

Такая клавиатура может быть полезной для пользователей, если ваш input принимает доменные имена (например, xhtml.ru) или полные URI (например, https://xhtml.ru). Если ваш input требует валидацию URL, используйте type="url".

<input type="text"
  inputmode="search" />

Значение search в Chrome Android (слева) и iOS 12.2 (справа)

Вместо Return отображается синяя клавиша Go на iOS и зеленая клавиша Enter на Android. Как вы уже догадались по названию значения, search полезен для форм поиска, которые предоставляют эту кнопку для отправки запроса.

Если хотите отобразить Search вместо Enter на iOS и вместо зеленой стрелки значок лупы на Android, используйте type="search".

enterkeyhint

Safari теперь поддерживает enterkeyhint

enterkeyhint в Safari

Демо

Для устройств с экранной клавиатурой. Посмотрите на экране смартфона или планшета, как изменяется вид клавиатуры для полей с разными значениями атрибута inputmode.

inputmode="none"


inputmode="numeric"


inputmode="tel"


inputmode="decimal"


inputmode="email"


inputmode="url"


inputmode="search"

Больше примеров:

See this code input mode on x.xhtml.ru.