HTML5: тип ввода чисел, который принимает только целые числа? - PullRequest
Новая
       52

HTML5: тип ввода чисел, который принимает только целые числа?

221 голосов
/ 10 января 2012

Я использую jQuery Tools Validator , который реализует проверки HTML5 через jQuery.Пока все отлично работает, кроме одной вещи.В спецификации HTML5 тип ввода «число» может иметь как целые числа, так и числа с плавающей запятой.Это кажется невероятно недальновидным, поскольку это будет полезным средством проверки, только если поля вашей базы данных имеют числа с плавающей запятой со знаком (для неподписанных целочисленных значений вам придется вернуться к проверке «шаблона» и, таким образом, потерять дополнительные функции, такие как стрелки вверх и вниз).для браузеров, которые его поддерживают).Есть ли другой тип ввода или, возможно, атрибут, который будет ограничивать ввод только целыми числами без знака?Я не смог найти ничего, спасибо.

РЕДАКТИРОВАТЬ

Хорошо, ребята, я ценю ваше время и помощь, но я вижу, что происходит много незаслуженного голосования: D,Установка шага в 1 не является ответом, так как он не ограничивает ввод.Вы все еще можете ввести отрицательное число с плавающей запятой в текстовое поле.Кроме того, я знаю о проверке шаблонов (я упоминал об этом в моем первоначальном сообщении), но это не было частью вопроса.Я хотел знать, позволяет ли HTML5 ограничивать ввод типа «число» положительными целочисленными значениями.Похоже, что на этот вопрос ответ будет «нет, это не так».Я не хотел использовать валидацию шаблонов, потому что это вызывает некоторые недостатки при использовании валидации jQuery Tools, но теперь кажется, что спецификация не допускает более чистого способа сделать это.

Ответы [ 19 ]

281 голосов
/ 20 июня 2013

https://www.w3.org/wiki/HTML/Elements/input/number

Лучшее, что вы можете достичь только с HTML 

    <input type="number" min="0" step="1"/>
161 голосов
/ 10 января 2012

Установите атрибут step на 1: 

<input type="number" step="1" />

В настоящее время в Chrome это выглядит некорректно, поэтому в данный момент это может быть не лучшим решением.

Лучшее решение - использовать атрибут pattern, который использует регулярное выражение для сопоставления с вводом: 

<input type="text" pattern="\d*" />

\d - это регулярное выражение для числа, * означает, что оно принимает более одного из них. Вот демо: http://jsfiddle.net/b8NrE/1/

33 голосов
/ 18 мая 2015

Простой способ использования JavaScript: 

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" >
25 голосов
/ 03 мая 2014 
<input type="text" name="Phone Number" pattern="[0-9]{10}" title="Phone number">

Используя этот код, ввод в текстовое поле ограничивается вводом только цифр.Шаблон - это новый атрибут, доступный в HTML 5.

Атрибут шаблона doc

17 голосов
/ 24 ноября 2016

Шаблон хорош, но если вы хотите ограничить ввод только числами с type = "text", вы можете использовать oninput и регулярное выражение, как показано ниже: 

<input type="text" oninput="this.value=this.value.replace(/[^0-9]/g,'');" id="myId"/>

Я ласкаю меня:)

14 голосов
/ 03 мая 2014

Это не только для html5, все браузеры работают нормально.попробуйте это 

onkeyup="this.value=this.value.replace(/[^0-9]/g,'');"
8 голосов
/ 09 ноября 2018 
 <input type="number" min="0" step="1" pattern="\d+"/>
8 голосов
/ 01 марта 2017

Шаблон всегда предпочтительнее для ограничения, попробуйте oninput и min встречаются 1 для ввода только цифр от 1 и далее 

<input type="text" min="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');"
                                value=${var} >
5 голосов
/ 10 января 2012

вы пытались установить атрибут step в 1, как это 

<input type="number" step="1" />
4 голосов
/ 24 мая 2012

Да, HTML5 делает.Попробуйте этот код ( w3school ): 

<!DOCTYPE html>
<html>
<body>

<form action="">
  Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5" />
  <input type="submit" />
</form>

</body>
</html>

Видите минимальный и максимальный параметры?Я пробовал использовать Chrome 19 (работал) и Firefox 12 (не работал).

Страница:
...