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

178

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

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

Тами
источник
Там еще не очень хороший ответ для почтовых индексов. Я переспросил этот вопрос специально для международных почтовых индексов здесь: stackoverflow.com/questions/25425181/…
Райан Макгири
Я нашел хакерский способ сделать это .. своего рода: stackoverflow.com/a/25599024/1922144
davidcondrey
По состоянию на середину 2015 года есть лучший способ сделать это: stackoverflow.com/a/31619311/806956
Аарон Грей

Ответы:

206

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

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

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

Сет Стоун
источник
23
Если вам нужна только цифровая клавиатура, но вы не хотите проверять (например, в Chrome), вы можете поместить атрибут novalidate в форму. <form ... novalidate>
Брайан
4
Я обнаружил, что \d*не работает и [0-9]требуется. Обратите внимание, что это будет работать с type='numeric'. Это предлагается на основе ссылки на документы для почтового индекса.
Бретт Райан
11
Это работает до тех пор, пока вам нужны ТОЛЬКО числовые значения. Числа с плавающей точкой, которые требуют «.» (или ',' для некоторых регионов) не могут быть введены, так как они не содержат эти символы на клавиатуре.
DrHall
2
Если мне нужно использовать. (точка), как я могу использовать это? этот шаблон показывает только [0-9]
15
<input type = "text" pattern = "\ d *"> не работает на Android? Я тестировал на IOS и работал успешно, но не работал на Android. как я могу это решить
Камаль
158

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

Аарон Грей
источник
1
HTML5 type="number" спецификация говорит следующие атрибуты контента не должны быть определены и не применяются к элементу: ... INPUTMODE
Tgr
2
@ Tgr Ааа, хороший улов. Похоже, что спецификация хочет, чтобы люди использовали ее, <input type="text" inputmode="numeric">и хочет, чтобы мобильные браузеры смотрели, inputmodeчтобы определить, показывает ли она цифровую клавиатуру или полную клавиатуру. Поскольку ни один браузер не поддерживает inputmode, я не уверен, как он будет реализован в настольных и мобильных браузерах. Пример: позволят ли браузеры на рабочем столе вводить буквы <input type="text" inputmode="numeric">? Если так, то это проблема. <input type="number">предотвращает это, только разрешающие номера. Возможно, нам придется подождать, пока браузеры начнут его реализовывать, и тогда мы сможем обновить этот ответ.
Аарон Грей,
2
Поддержка type="number"является достойной , но он может отобразить счетчик , который не имеет особого смысла для , например , номера кредитных карт.
Tgr
2
Тип = "число" - это боль в заднице X (. Если ввод неверен, вы не сможете получить значение ввода в JS, вы не сможете получить позицию курсора и т. Д.
Nicu Сурду
2
This attribute applies when the value of the type attribute is text, search, tel, url, email, or password, otherwise it is ignored.
Майкл
61

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

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

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

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

Габриэль Райан Намиас
источник
4
Для меня проблемой было не автоматическое форматирование, а проверка. Ввод типа numberустанавливает строгие правила для числа во многих браузерах. Если пользователь добавляет пробел (или запятую) для разделения тысяч, вы не получите НИКАКОГО значения из ввода. Да даже в JavaScript input.valueбудет пусто. Ввод типа telне ограничен определенным форматом, поэтому пользователь все еще может вводить что угодно, и валидация - это отдельный процесс (для разработчика).
Nux
Как я могу использовать десятичные числа в этой клавиатуре
Anto
11

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

Никлас
источник
9

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

Майк
источник
6
Добавление novalidateатрибута к содержимому form elementдолжно решить проблемы с автоматической проверкой. Обязательно сделайте некоторую проверку самостоятельно.
Юстус Ромийн
7
<input type="text" inputmode="numeric">

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

Ральф де Кляйн
источник
4

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

Кот Чен
источник
8
У меня проблема в том, что type = "number" предназначено только для чисел с плавающей запятой, поэтому никаких кредитных карт, почтовых индексов или множества других чисел, только строк. Я надеялся, что есть как семантический способ кодирования, так и правильное отображение клавиатуры. Я думаю, что подходящим типом будет input type = "text", но тогда появится неправильная клавиатура. Если бы вы могли указать мне на какой-то javascript, это решило бы обе проблемы.
Тами
2
type="number"для поплавка. type="text"для строки. То, что вы действительно хотите, это целое число. Я думаю, что число с плавающей точкой ближе к целому числу, чем строка. Что вы думаете?
Кот Чен
6
С type = "number" следует остерегаться того, что по крайней мере Chrome заставит вводить число, которое будет разбивать номера кредитных карт, введенные с пробелами (например)
John Carter
8
@therefromhere Это также повернет почтовые индексы , как 01920на 1920.
ceejayoz
это также может испортить ситуацию, если у пользователя в браузере установлен другой язык stackoverflow.com/questions/5345095/…
dalore
4

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

Для целых чисел, который вызывает пэд 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" />
АКМ
источник
1

В 2018 году:

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

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

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

Шалика Акаланка
источник
0

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

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

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

alexwenzel
источник
0

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

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

Чамин Тилакарат
источник
0

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

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

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

Афаз Хатри
источник
Этот ответ предлагает то же решение, предложенное @Ralf de Kleine
xKobalt