787просмотров
70.3%от подписчиков
2 февраля 2026 г.
statsScore: 866
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