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

Question

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

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

Answer 1

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

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

<form>
  <input type="text" pattern="\d*">
  <button type="submit">Submit</button>
</form>

Answer 2

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

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

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

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

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

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

Комбинируя type="number" и pattern="[0-9]*, мы получаем решение, которое работает везде. И его прямая совместимость с будущим HTML 5.1 предложенным атрибутом inputmode.

Примечание. Использование шаблона приведет к проверке собственной формы браузера. Вы можете отключить это с помощью атрибута 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-numeric-keypad/

Answer 3

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

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

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

Answer 4

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

Answer 5

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

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

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

Answer 7

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

Answer 8

В 2018 году:

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

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

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

Answer 9

попробуйте это:

$(document).ready(function() {
    $(document).find('input[type=number]').attr('type', 'tel');
});

см .: https://answers.laserfiche.com/questions/88002/Use-number-field-input-type-with-Field-Mask

Answer 10

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

Вместо этого я добавил флажок в форму и позволил пользователю переключаться.мой ввод (id = "inputSresult") между type = "number" и type = "text".

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

    }
});

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