inputmode
Подсказывает телефонам и планшетам, какую экранную клавиатуру показать для поля, не меняя того, что поле принимает.
Синтаксис
<input type="text" inputmode="numeric">Параметры
| Параметр | Тип | Описание |
|---|---|---|
| inputmode | text | numeric | decimal | tel | email | url | search | none | `numeric` — только цифры, `decimal` — цифры и десятичный разделитель, `tel`, `email`, `url`, `search`, `text` (по умолчанию) или `none` (без клавиатуры). |
Примеры
Поле для одноразового кода: на телефоне цифровая клавиатура, но без стрелок числового поля, и ведущие нули сохраняются:
<label>
Code from SMS
<input type="text" inputmode="numeric" autocomplete="one-time-code" pattern="[0-9]{6}" maxlength="6">
</label>Цена с десятичной точкой:
<label>Price, $ <input type="text" inputmode="decimal" placeholder="9.99"></label>Примечания
Используйте его, когда значение состоит из цифр, но по сути не число: коды, номера карт, почтовые индексы — type="number" добавил бы стрелки, отбросил бы ведущие нули и пропустил бы e. На компьютере с обычной клавиатурой атрибут ничего не делает. Проверяйте значение через pattern или на сервере: inputmode ничего не проверяет.
См. также
- <input> — Поле ввода; вид поля задаёт атрибут `type`.
- type — Вид поля `<input>`: от текста и чисел до даты, цвета и файла.
- pattern — Шаблон (регулярное выражение), которому должно соответствовать значение поля.
- autocomplete — Подсказывает браузеру, какие сохранённые данные подставить в поле.
В учебнике
- Виды полей ввода — Атрибут type у input — текст, почта, пароль, числа и ползунок, даты, флажки, переключатели, цвет и файл.