Атрибут 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.
Но прежде чем углубляться во все тонкости атрибута, рассмотрим, что WHATWG living standard предоставляет документацию для inputmode, а спецификация W3C 5.2 больше не перечисляет его в своем содержимом, что говорит о том, что он считает его устаревшим. Учитывая, что в WHATWG это задокументировало, а браузеры работали над его поддержкой, мы можем предположить, что спецификации WHATWG являются стандартом.
inputmode может принимать несколько значений. Давайте пройдемся по ним один за другим.
None
<input type="text" inputmode="none" />
Мы с типа none, потому что вполне возможно, что нам не понадобится клавиатура любого типа для ввода. Использование inputmode=none не будет отображать клавиатуру на Chrome в Android. iOS 12.2 по-прежнему будет отображать алфавитно-цифровую клавиатуру по умолчанию, поэтому указание none не может быть своего рода сбросом для iOS в этом отношении. В любом случае, ни один из них не предназначен для контента, который отображает собственное управление с клавиатуры.
Numeric
<input type="text" inputmode="numeric" />
Вероятно, это одно из наиболее распространенных значений inputmode, поскольку оно идеально подходит для input, для которых требуются цифры, но без букв, например: ввод PIN-кода, почтовые индексы, номера кредитных карт и т.д. Использование числового значения с вводом type="text" может на самом деле иметь больше смысла, чем установка ввода только для type="number", потому что, в отличие от числового ввода, inputmode="numeric" может использоваться с атрибутами maxlength, minlength и pattern, что делает его более универсальным для различных случаи применения.
и iOS 12.2 (справа)")
Я часто видел сайты, использующие type=tel на input для отображения цифровой клавиатуры, и это выглядит как обходной путь, но не является семантически правильным. Если это вас раздражает, помните, что inputmode поддерживает шаблоны, мы можем добавить pattern="\d*" к input для того же эффекта. Тем не менее, используйте это только в том случае, если вы уверены, что ввод должен разрешать только числа, потому что Android (в отличие от iOS) не позволяет пользователю переключаться на клавиатуру для использования букв, что может непреднамеренно помешать пользователям отправлять действительные данные.
Tel
<input type="text" inputmode="tel" />
Ввод телефонного номера с использованием стандартной буквенно-цифровой клавиатуры может быть проблемой. Для одного каждое число на телефонной клавиатуре (кроме 1 и 0) представляет три буквы (например, 2 представляет A, B и C), которые отображаются с номером. Буквенно-цифровая клавиатура не ссылается на эти буквы, поэтому декодирование телефонного номера, содержащего буквы (например, 1-800-COLLECT), требует большей умственной силы.
и iOS 12.2 (справа)")
Использование inputmode tel, приведет к появлению стандартной телефонной клавиатуры, включая клавиши для цифр от 0 до 9, знак решетки (#) и символ звездочки (*). Кроме того, мы получаем эти буквенные мнемонические метки (например, ABC).
Decimal
<input type="text" inputmode="decimal" />
и iOS 12.2 (справа)")
Режим ввода decimal приводит к незначительному изменению в iOS, когда клавиатура выглядит точно так же, как значение tel, но заменяет клавишу +*# простым десятичным (.). С другой стороны, это не влияет на Android, который будет просто использовать цифровую клавиатуру.
<input type="text" inputmode="email" />
Я уверен, что вы (и, по крайней мере, кто-то из ваших знакомых) заполняя форму, запрашивающую адрес электронной почты, меняли режим клавиатуры только для доступа к символу @. Это не опасно для жизни или что-то в этом роде, но, безусловно, не очень удобно для пользователя.
Вот тут-то и приходит значение email. Оно приводит к появлению символа @, а также десятичного (.) Символа.
и iOS 12.2 (справа)")
Это также может быть полезной клавиатурой для отображения пользователям, которым необходимо ввести имя пользователя Twitter, учитывая, что @ является основным символом Twitter для идентификации пользователей. Тем не менее, предложения по адресу электронной почты, которые iOS отображает над клавиатурой, могут вызвать путаницу.
Другой вариант использования может быть, если у вас есть собственный сценарий проверки электронной почты и вы не хотите использовать встроенную в браузер проверку электронной почты.
URL
<input type="text" inputmode="url" />
и iOS 12.2 (справа)")
Значение url предоставляет пользователям удобный ярлык для добавления доменов верхнего уровня (например, .com или .ru) с помощью одного ключа, а также ключей, обычно используемых в веб-адресах, таких как точка (.) И символы косой черты (/). Точный TLD(Top-Level Domain), отображаемый на клавиатуре, привязан к языку пользователя.
Это также может быть полезной клавиатурой для отображения пользователям, если ваш ввод принимает доменные имена (например, zencod.ru), а также полные URI (например, https://zencod.ru). Вместо этого используйте type="url", если ваш ввод требует проверки ввода.
Search
<input type="text" inputmode="search" />
и iOS 12.2 (справа)")
Отображается синяя клавиша Go на iOS и зеленая клавиша Enter на Android, вместо того, где ранее был Return. Как вы уже догадались по названию значения, поиск полезен для форм поиска, которые предоставляют этот ключ для отправки запроса.
Если вы хотите отобразить Search вместо Enter на iOS и значок увеличительного стекла на Android вместо зеленой стрелки, используйте вместо этого type=search.
Другие вещи, которые вы должны знать
- Браузеры на базе Chrome в Android, такие как Microsoft Edge, Brave и Opera, используют то же поведение
inputmode, что и Chrome. - Для краткости я не включил детали клавиатуры в iPad. Он в основном такой же, как iPhone, но содержит больше ключей. То же самое верно для планшетов Android, за исключением сторонних клавиатур, которые могут иметь совершенно другой вид.
- Первоначально предлагаемая спецификация имела значения
kanaиkatakanaдля японского ввода, но они никогда не были реализованы никаким браузером и с тех пор были удалены из спецификации. latin-nameтакже было одним из значений оригинальной спецификации и с тех пор было удалено. Интересно, что если он теперь используется в Safari для iOS, он будет отображать имя пользователя в качестве подсказки над клавиатурой.