Какой тип поля ввода заставляет мобильную клавиатуру с цифровой клавиатурой подниматься при фокусировке?

Я попробовал <input type="number" />, но в Opera вывел странное поле ввода вместе с обработчиком "вверх и вниз". Я ожидал, что это регулярное текстовое поле, которое, как только вы сосредоточитесь на нем, предложит клавиатуру номера вместо алфавитов. Возможно ли это?

p.s. Я не пытаюсь утверждать. Это будет приятный пользовательский опыт, что все.

Ответ 1

type = "number" - это HTML5, а ~~многие телефоны не поддерживают HTML5~~. Для телефонной линии вы можете использовать type = "tel" или <A href="wtai://wp/mc;600112233">Special A</A>. Вы должны посмотреть на CSS WAP-расширения (стр. 56).

EDIT 10/2015:
Большинство, если не ВСЕ смартфоны поддерживают HTML5 и CSS3, поэтому type="number" - лучший способ.

Ответ 2

Используйте pattern="[0-9]*"

Пример ввода номера: <input type="number" pattern="[0-9]*" />
Пример ввода телефона: <input type="tel" pattern="[0-9]*" />

Примечание. Браузеры, не поддерживающие type="tel", по умолчанию будут иметь тип текста

Остерегайтесь: Использование type="number" может привести к проблемам с некоторыми браузерами и пользовательским интерфейсом для кредитных карт, почтовых индексов и телефонных вводов, где пользователю может потребоваться ввести пунктуацию или запятую, находящуюся на выходе.

Литература:

Ответ 3

Официальный способ HTML5 обрабатывать номера телефонов:

<input type="tel">

Возможно, вам не понравилось "странное поле ввода", которое вы получили в Opera, когда вы использовали <input type="number" />, но это действительно соответствующий тип области ввода, когда вы хотите, чтобы посетители вводили числовое значение.

Ответ 4

Это сообщение теперь недействительно. Все смартфоны теперь поддерживают HTML5 и CSS3, поэтому добавление type = "number" действительно вызывает всплывающее число. Я просто проверил его на двух разных версиях Android и на iPhone. Просто так никто в будущем не пытается WAP вместо правильного формата HTML5.

Ответ 5

Это будет работать на мобильных устройствах и не позволит вводить букву "е" (вместе со всеми остальными буквами) в настольной версии вашей страницы. type="number" само по себе все еще обычно допускает "е" в спецификации:

<input pattern="[0-9]*" type="text" oninput="this.value=this.value.replace(/[^0-9]/g,'');">

Если вы используете type="number" в приведенном выше oninput, то, если вы oninput "123", тогда "e" на oninput JS заменит все содержимое поля. Просто используйте type = "text", если вы действительно просто целочисленные значения.

Ответ 6

Попробуйте <input type="number" pattern="/d*"> ИЛИ <input type="tel" pattern="/d*"> Это поможет, если вы работаете с Android.