<
<divelopers>
@alexnozer_dev1.1K подп.
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="&#092;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
787
просмотров
2511
символов
Нет
эмодзи
Нет
медиа

Другие посты @alexnozer_dev

Все посты канала →
You don't know HTML: inputmode HTML предлагает встроенные ти — @alexnozer_dev | PostSniper