it-swarm.com.ru

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

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

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

144
Tami

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

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

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

182
Seth Stone

По состоянию на середину 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>

Комбинируя 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-numeric-keypad/

115
Aaron Gray

Я обнаружил, что, по крайней мере для полей, подобных «парольному коду», выполнение чего-то вроде <input type="tel" /> приводит к получению наиболее аутентичного number - ориентированного поля, а также имеет преимущество без автоформатирования , Например, в мобильном приложении, которое я недавно разработал для 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>

50
Gabriel Ryan Nahmias

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

11
Niklas

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

8
Mike

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

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

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

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

4
Cat Chen

В 2018 году:

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

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

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

2
Shalika Akalanka

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

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

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

0
alexwenzel

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

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

0
Luiz Fernando Corrêa Leite

Я не мог найти тип, который работал бы лучше всего для меня во всех ситуациях: мне нужно было ввести значение по умолчанию для числовой записи (например, «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");

    }
});

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

0
Jeff Mergler