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

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

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

Ответы

Ответ 2

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

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

Это даст вам цифровую клавиатуру на Android и iOS:

enter image description here

Он также дает ожидаемое поведение рабочего стола с помощью кнопок со стрелками вверх/вниз и дружественных клавиш клавиатуры со стрелками вверх/вниз:

enter image description here

Попробуйте это в следующем фрагменте кода:

<form>
  <input type="number" pattern="[0-9]*" inputmode="numeric">
  <button type="submit">Submit</button>
</form>

Ответ 3

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

iPhone Web Application Display with an Input Tag Having a Type of TEL which Produces a very Decent Numeric Keyboard as Opposed to Type Number which is Autoformatted and Has a Somewhat Less Intuitive Input Configuration

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

<form>
  <input type="tel" />
  <button type="submit">Submit</button>
</form>

Ответ 4

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

Ответ 5

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

Ответ 6

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

Для целых чисел, которые вызывают 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 на всякий случай, когда вам действительно нужны номера с плавающей запятой, сделайте шаг к любой точности, которую вы представляете, добавит '.' to android

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

Ответ 7

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

Ответ 8

В 2018 году:

<input type="number" pattern="\d*">

работает как для Android, так и для iOS.

Я тестировал на Android (^ 4.2) и iOS (11.3)

Ответ 9

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

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

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

Ответ 10

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

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

<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");

    }
});

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