Есть ли способ заставить цифровую клавиатуру подняться на телефон для <input type="text">
? Я только что понял, что <input type="number">
в HTML5 это «числа с плавающей точкой», поэтому он не подходит для номеров кредитных карт, почтовых индексов и т. Д.
Я хочу эмулировать функциональность цифровой клавиатуры <input type="number">
для входов, которые принимают числовые значения, отличные от чисел с плавающей запятой. Может быть, есть другой подходящий input
тип, который это делает?
Ответы:
Вы можете сделать
<input type="text" pattern="\d*">
. Это приведет к появлению цифровой клавиатуры.См. Здесь для получения более подробной информации: Руководство по программированию текста, Интернета и редактирования для iOS
источник
\d*
не работает и[0-9]
требуется. Обратите внимание, что это будет работать сtype='numeric'
. Это предлагается на основе ссылки на документы для почтового индекса.По состоянию на середину 2015 года, я считаю, что это лучшее решение:
Это даст вам цифровую клавиатуру на Android и iOS:
Он также дает ожидаемое поведение рабочего стола с кнопками со стрелками вверх / вниз и удобными клавишами со стрелками вверх / вниз:
Попробуйте это в следующем фрагменте кода:
Комбинируя и,
type="number"
иpattern="[0-9]*
мы получаем решение, которое работает везде. И его прямая совместимость с будущим предложеннымinputmode
атрибутом HTML 5.1 .Примечание. Использование шаблона приведет к проверке собственной формы браузера. Вы можете отключить это, используя
novalidate
атрибут, или вы можете настроить сообщение об ошибке для неудачной проверки, используяtitle
атрибут.Если вам нужно ввести начальные нули, запятые или буквы - например, международные почтовые индексы - попробуйте этот небольшой вариант .
Кредиты и дальнейшее чтение:
http://www.smashingmagazine.com/2015/05/form-inputs-browser-support-issue/ http://danielfriesen.name/blog/2013/09/19/input-type-number-and-ios- цифровая клавиатура/
источник
type="number"
спецификация говорит следующие атрибуты контента не должны быть определены и не применяются к элементу: ... INPUTMODE<input type="text" inputmode="numeric">
и хочет, чтобы мобильные браузеры смотрели,inputmode
чтобы определить, показывает ли она цифровую клавиатуру или полную клавиатуру. Поскольку ни один браузер не поддерживаетinputmode
, я не уверен, как он будет реализован в настольных и мобильных браузерах. Пример: позволят ли браузеры на рабочем столе вводить буквы<input type="text" inputmode="numeric">
? Если так, то это проблема.<input type="number">
предотвращает это, только разрешающие номера. Возможно, нам придется подождать, пока браузеры начнут его реализовывать, и тогда мы сможем обновить этот ответ.type="number"
является достойной , но он может отобразить счетчик , который не имеет особого смысла для , например , номера кредитных карт.This attribute applies when the value of the type attribute is text, search, tel, url, email, or password, otherwise it is ignored.
Я обнаружил , что, по крайней мере «код доступа» -подобных полей, делать что - то вроде
<input type="tel" />
заканчиваешь производство наиболее аутентичный номер -ориентированного поля , и он также имеет преимущество не автоформатирования . Например, в мобильном приложении, которое я недавно разработал для Hilton, я остановился на следующем:... и мой клиент был очень впечатлен.
источник
number
устанавливает строгие правила для числа во многих браузерах. Если пользователь добавляет пробел (или запятую) для разделения тысяч, вы не получите НИКАКОГО значения из ввода. Да даже в JavaScriptinput.value
будет пусто. Ввод типаtel
не ограничен определенным форматом, поэтому пользователь все еще может вводить что угодно, и валидация - это отдельный процесс (для разработчика).Использование
type="email"
илиtype="url"
даст вам клавиатуру, по крайней мере, на некоторых телефонах, таких как iPhone. Для телефонных номеров вы можете использоватьtype="tel"
.источник
Существует опасность при использовании
<input type="text" pattern="\d*">
цифровой клавиатуры. В Firefox и Chrome регулярное выражение, содержащееся в шаблоне, заставляет браузер проверять ввод этого выражения. ошибки будут возникать, если они не соответствуют шаблону или оставлены пустыми. Будьте в курсе непреднамеренных действий в других браузерах.источник
novalidate
атрибута к содержимомуform element
должно решить проблемы с автоматической проверкой. Обязательно сделайте некоторую проверку самостоятельно.С Inputmode вы можете дать подсказку браузеру.
источник
Я думаю, что
type="number"
является лучшим для семантической веб-страницы. Если вы просто хотите сменить клавиатуру, вы можете использоватьtype="number"
илиtype="tel"
. В обоих случаях iPhone не ограничивает пользовательский ввод. Пользователь по-прежнему может вводить (или вставлять) любые символы, которые он / она хочет. Единственное изменение - клавиатура, показанная пользователю. Если вы хотите, чтобы какое-либо ограничение выходило за рамки этого, вам нужно использовать JavaScript.источник
type="number"
для поплавка.type="text"
для строки. То, что вы действительно хотите, это целое число. Я думаю, что число с плавающей точкой ближе к целому числу, чем строка. Что вы думаете?01920
на1920
.Для меня лучшим решением было:
Для целых чисел, который вызывает пэд 0-9 на Android и iPhone
Вы также можете сделать это, чтобы скрыть счетчики в Firefox / Chrome / Safari, большинство клиентов считают, что они выглядят некрасиво
И добавьте novalidate = 'novalidate' к элементу формы, если вы делаете пользовательскую проверку
Ps на тот случай, если вам действительно нужны числа с плавающей запятой, в любом случае, добавьте «.» на андроид
источник
В 2018 году:
работает как для Android, так и для iOS.
Я тестировал на Android (^ 4.2) и iOS (11.3)
источник
Вы можете попробовать так:
Но будьте осторожны: если ваш ввод содержит что-то кроме числа, он не будет передан на сервер.
источник
Я не мог найти тип, который работал бы лучше всего для меня во всех ситуациях: мне нужно было ввести значение по умолчанию для числовой записи (например, «7,5»), но также в определенное время разрешить текст (например, «передать»). Пользователи хотели использовать цифровую клавиатуру (например, запись 7,5), но иногда требовался ввод текста (например, «пропуск»).
Вместо этого я добавил флажок в форму и позволил пользователю переключать мой ввод (id = "inputSresult") между type = "number" и type = "text".
Затем я подключил обработчик кликов к флажку, который переключает тип между текстом и числом в зависимости от того, установлен ли флажок выше:
Это хорошо сработало для нас.
источник
это даст вам ввод текста с помощью цифровой клавиатуры
источник
Вы можете использовать
inputmode
атрибут html:Для получения более подробной информации, ознакомьтесь с документом MDN в режиме ввода .
источник
попробуй это:
см .: https://answers.laserfiche.com/questions/88002/Use-number-field-input-type-with-Field-Mask
источник