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

Question

Я пробовал <input type="number" />, но в Opera, которая выводит странное поле ввода в сочетании с обработчиком «вверх и вниз». То, что я ожидал, было обычным текстовым полем, которое, как только вы сфокусировались на нем, запрашивает цифровую клавиатуру вместо букв. Это вообще возможно?

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

Answer 1

Использование pattern="[0-9]*"

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

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

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

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

Ссылки:

• http://bradfrost.com/blog/mobile/better-numerical-inputs-for-mobile-forms/
• http://danielfriesen.name/blog/2013/09/19/input-type-number-and-ios-numeric-keypad/

Answer 2

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

<input type="tel">

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

Answer 3

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

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

Answer 4

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

Answer 5

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

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

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

Answer 6

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