You don't know HTML: inputmode

HTML предлагает встроенные типы текстовых полей ввода для некоторых распространённых типов данных:

- number
- email
- url
- tel
- password

У таких полей есть встроенные механизмы валидации данных, дополнительные возможности настройки и поведение. number позволяет ограничивать диапазон и управлять шагом, а password заменяет введённые символы на кружки.

Во встроенных текстовых полях виртуальная клавиатура адаптируется под данные. Но существующие типы полей не всегда уместны: number и tel не подходят для номера карты, идентификатора или номера посылки.

В таких случаях стоит использовать обычное текстовое поле type="text" в сочетании с атрибутом inputmode, который управляет виртуальной клавиатурой. Сверху можно добавить JS для валидации соответствующих данных. Если требуется поле ввода 8-значного кода, состоящего только из цифр, можно использовать такое сочетание:

<label for="order_id">
  Код заказа
</label>
<input
  type="text"
  inputmode="numeric"
  pattern="\d{8}"
  id="order_id"
  name="order_id"
  size="8"
  placeholder="12345678"
  aria-describedby="order_id_hint"
>
<span id="order_id_hint">
  8 цифр, например: 12345678
</span>

Атрибут inputmode принимает одно из следующих значений:

- none — виртуальную клавиатуру отображать не нужно;
- decimal — клавиатура с большими цифрами, дополнительными знаками и разделителями для дробных чисел;
- numeric — клавиатура с большими цифрами;
- text — значение по умолчанию. Отображается стандартная клавиатура;
- tel — клавиатура с большими цифрами и дополнительными символами * и #;
- search — стандартная клавиатура, адаптированная для поискового запроса, вместо кнопки ввода может отображаться, кнопка с лупой;
- email — стандартная клавиатура, адаптированная для адресов электронной почты, включает символ @;
- url — стандартная клавиатура, адаптированная для URL-адресов, включает символ /.

Наиболее интересны первые три значения. Остальные соответствуют встроенным типам полей и лучше использовать их вместо inputmode. Тем не менее они пригодятся при создании собственных полей на базе contenteditable.

<p id="custom-label">
  Email
</p>
<div
  class="custom-input"
  contenteditable
  role="textbox"
  inputmode="email"
  aria-labeledby="custom-label"
  ...
></div>

Если вы принимаете от пользователя данные, для которых нет подходящих встроенных типов полей, установите соответствующие значение inputmode. Это сделает ввод данных на устройствах с виртуальной клавиатурой удобнее.

#ydkhtml