Числовая клавиатура для полей формы на мобильном

HTML
Добавлено: 24 марта 2019 г.

При верстке макетов не нужно забывать, тем более в 2019 году, о том, что львиная доля трафика на сайты идет со смартфонов и нужно сделать так, что бы этим самым сайтом было удобно пользоваталься.

Одним из главных элементов любой страницы является форма. Представим ситуацию, что при регистрации мы просим пользователя ввести его номер телефона в соответствующее поле. Стоит нам поставить фокус на поле, предназначенным для номера, появляется обычная клавиатура. Согласитесь, не очень удобно нажимать на достаточно мелкие цифры.

Тут нам приходят на помощь такие типы полей как number, tel и цифровые паттерны.

Стоит отметить, что в наличии у меня был смартфон на андроид и старенький iPad mini 2. Смартфона на iOS не было и поэтому для тестов я поспользовался этим сервисом. 

Результаты

<input type="text" >

and-text-no-patt

<input type="text" pattern="[0-9]*">

<input type="number">

<input type="number" pattern="[0-9]*">

<input type="tel" >

<input type="tel" pattern="[0-9]*">

А ведь так на много удобнее. В iOS дела обстоят похожим образом, но есть единственное различие. Андроид никак не реагирует на наличие атрибута pattern, когда тип поля установлен как text. В свою очередь на iOS клавиатура меняется на цифровую.

Все тесты проводил тут.

Онлайн iOS находитсят тут

Обсуждаем статью на страничке в ВК

Примечание

Стоит заметить, что в старых подобных статьях говорится о том, что при типе поля number на iOS, после каждой третьей цифры ставится разделить. На момент тестирования такого поведения я не заметил.