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

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

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

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

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

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

По состоянию на середину 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]*мы получаем решение, которое работает везде. И его прямая совместимость с будущим предложенным 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" />заканчиваешь производство наиболее аутентичный номер -ориентированного поля , и он также имеет преимущество не автоформатирования . Например, в мобильном приложении, которое я недавно разработал для Hilton, я остановился на следующем:

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

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

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

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

<input type="text" inputmode="numeric">

С Inputmode вы можете дать подсказку браузеру.

Я думаю, что 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" />

В 2018 году:

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

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

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

Вы можете попробовать так:

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

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

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

Вместо этого я добавил флажок в форму и позволил пользователю переключать мой ввод (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");

    }
});

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

 <input type="text" inputmode="decimal">

это даст вам ввод текста с помощью цифровой клавиатуры

Вы можете использовать inputmodeатрибут html:

<input type="text" inputmode="numeric" />

Для получения более подробной информации, ознакомьтесь с документом MDN в режиме ввода .

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

$(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