Телефон: цифровая клавиатура для ввода текста

Есть ли способ заставить клавиатуру с цифрами появиться на телефоне для <input type="text"> ? Я просто понял, что <input type="number"> в HTML5 предназначен для «чисел с плавающей запятой», поэтому он не подходит для номеров кредитных карт, почтовых индексов и т. Д.

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

Вы можете сделать <input type="text" pattern="\d*"> . Это приведет к появлению цифровой клавиатуры.

Подробнее см. Здесь: Руководство по программированию текста, Интернета и редактирования для iOS

По состоянию на середину 2015 года я считаю, что это лучшее решение:

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

Это даст вам цифровую клавиатуру на 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- цифровая клавиатура/

Я обнаружил, что, по крайней мере, для полей <input type="tel" /> «passcode», что-то вроде <input type="tel" /> заканчивается созданием самого аутентичного поля, ориентированного на число, и оно также имеет преимущество без автоформатирования . Например, в мобильном приложении, которое я недавно разработал для Hilton, я решил:

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

… и мой клиент был очень впечатлен.

Использование type="email" или type="url" даст вам клавиатуру на некоторых телефонах, например, iPhone. Для телефонных номеров вы можете использовать type="tel" .

Существует опасность использования <input type="text" pattern="\d*"> для вызова цифровой клавиатуры. В firefox и chrome регулярное выражение, содержащееся в шаблоне, заставляет браузер проверять ввод этого выражения. Ошибки будут возникать, если они не совпадают с шаблоном или остаются пустыми. Помните о непредвиденных действиях в других браузерах.

Я думаю, что type="number" является лучшим для семантической веб-страницы. Если вы просто хотите сменить клавиатуру, вы можете использовать type="number" или type="tel" . В обоих случаях iPhone не ограничивает ввод пользователя. Пользователь все равно может вводить (или вставлять) любые символы, которые он хочет. Единственное изменение – клавиатура, показанная пользователю. Если вам нужны какие-либо ограничения, вы должны использовать JavaScript.

Для меня лучшим решением было:

Для целых чисел, которые вызывают 0-9 пэд на Android и iphone

 <label for="ting"> <input id="ting" name="ting" type="number" pattern="[\d]*" /> 

Вы также можете сделать это, чтобы скрыть прядильщики в firefox / chrome / safari, большинство клиентов считают, что они выглядят уродливыми

  input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance:textfield; } 

И добавьте novalidate = 'novalidate' в ваш элемент формы, если вы выполняете пользовательскую проверку

Ps на всякий случай, если вам действительно нужны номера с плавающей запятой, сделайте шаг к любой точности, которую вы представляете, добавит '.' К андроиду

 <label for="ting"> <input id="ting" name="ting" type="number" pattern="[\d\.]*" step="0.01" /> 

Вы можете попробовать следующее:

 <input type="number" name="input"> <input type="submit" value="Next" formnovalidate="formnovalidate"> 

Но будьте осторожны: если ваш ввод содержит нечто, отличное от числа, оно не будет передано на сервер.

Я не мог найти тип, который лучше всего работал для меня во всех ситуациях: мне нужно было по умолчанию ввести числовую запись (например, запись «7.5»), но также в определенные моменты времени можно использовать текст (например, «pass»). Пользователям нужна цифровая клавиатура (например, запись 7,5), но иногда требуется текстовая запись (например, «пропуск»).

Скорее всего, я добавил флажок в форму и разрешил пользователю переключать мой вход (id = "inputSresult") между типом = "число" и типом = "текст".

 <input type="number" id="result"... > <label><input id="cbAllowTextResults" type="checkbox" ...>Allow entry of text results.</label> 

Затем я подключил обработчик кликов к флажку, который переключает тип между текстом и номером в зависимости от того, установлен ли флажок выше:

 $(document).ready(function () { var cb = document.getElementById('cbAllowTextResults'); cb.onclick = function (event) { if ($("#cbAllowTextResults").is(":checked")) $("#result").attr("type", "text"); else $("#result").attr("type", "number"); } }); 

Это хорошо сработало для нас.