HTML5: тип ввода чисел, который принимает только целые числа?
Я использую jQuery Tools Validator, который реализует проверки HTML5 через jQuery. До сих пор он работал отлично, за исключением одного. В спецификации HTML5 тип ввода «число» может иметь как целые числа, так и числа с плавающей запятой. Это кажется невероятно близоруким, поскольку это будет только полезный валидатор, когда ваши поля базы данных будут подписаны с номерами с плавающей запятой (для неподписанных ints вам придется вернуться к проверке «шаблонов» и, следовательно, потерять дополнительные функции, такие как стрелки вверх и вниз для браузеров, которые его поддерживают). Есть ли другой тип ввода или, возможно, атрибут, который ограничивает ввод только целыми без знака? Я не мог найти, спасибо. ИЗМЕНИТЬ Хорошо, ребята, я ценю ваше время и помощь, но я вижу много незаслуженных голосований: D. Установка шага в 1 не является ответом, поскольку он не ограничивает ввод. Вы все равно можете ввести отрицательный номер с плавающей запятой в текстовое поле. Кроме того, мне известно о проверке шаблонов (я упомянул об этом в своем оригинальном посте), но это не было частью вопроса. Я хотел знать, допускает ли HTML5 ограничение ввода типа «число» на положительные целочисленные значения. На этот вопрос ответ, похоже, будет «нет, это не так». Я не хотел использовать проверку шаблонов, потому что это вызывает некоторые недостатки при использовании проверки JQuery Tools, но теперь кажется, что спецификация не позволяет более чистый способ сделать это.
По состоянию на 2019 год — с тех пор я не знаю — ввод number (по крайней мере, в FF / Chrome / Safari) теперь принимает по умолчанию только целые числа, если только вы не установили явное значение для атрибута step которое допускает десятичные значения; например: step=»0.01″ . Документированный MDN здесь . У меня две мысли об этом, потому что я думаю, что это разумное значение по умолчанию, но также и серьезное изменение (да, это повлияло на некоторый код, который я написал).
Поле для ввода чисел:
name имя ключа параметра value значение ключа параметра, которое может содержать: цифры «0-9», один плюс «+» или минус «-», один символ «e» или «E», одну точку «.». Можно ввести буквы, но форма не будет отправлена при нажатии на кнопку submit , а покажет сообщение об ошибке. Чаще всего не задаётся. Пользователь может его изменить, если не указаны атрибуты readonly и disabled . readonly заблокировано изменение пользователем disabled заблокированы доступ, изменение пользователем и передача данных текущего параметра required поле не может быть пустым step
step=20
step=any шаг изменения, который может быть положительным целым или дробным числом. Значение value кратно значению step , то есть делится на него без остатка. Пример разрешённых значений value при step=»20″ : …, -40, -20, 0, 20, 40, …. По умолчанию равен 1 . То есть покажет ошибку, если ввести десятичную дробь. Для того, чтобы убрать ограничения, нужно присвоить any . min минимально возможное значение value , необходимое для отправки формы max максимально возможное значение value , необходимое для отправки формы placeholder подсказка-заглушка title всплывающая подсказка при наведении курсора мышки autocomplete автозаполнение. Можно его отключить или сделать более конкретизированным. list список рекомендованных значений autofocus фокус поля (то есть период между щелчком по элементу и щелчком вне элемента) получен при загрузке документа
Поле не подходит для текстовых строк, состоящих из 16 и более цифр, например, номера пластиковой карты, так как длинные числа от 9007199254740991 могут округляться.
Количество товара
- увеличение и уменьшение значения числового поля с помощью кнопок пошагового изменения,
- сообщение об ошибки при вводе букв и дробных чисел,
- минимальное значение 1.
Чётные положительные целые числа
Нечётные положительные целые числа
Ввод чисел
Для ввода чисел предназначено специальное поле, которое допускает ограничения по нижней и верхней границе, а также устанавливает шаг приращения. Само поле для ввода чисел похоже на обычное текстовое поле, но со стрелками, которые позволяют увеличивать и уменьшать значение (рис. 1).
Рис. 1. Вид поля для ввода чисел
Синтаксис создания поля следующий:
Допустимые атрибуты перечислены в табл. 1.
| Атрибут | Описание |
|---|---|
| min | Минимальное значение. |
| max | Максимальное значение. |
| size | Ширина поля. |
| step | Шаг приращения числа. Может быть как целым (2), так и дробным (0.2). |
| name | Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать. |
| value | Начальное число, которое выводится в поле. |
Для ограничения введённого числа предназначены атрибуты min и max , они могут принимать отрицательное и положительное значение. При достижении верхнего или нижнего порога стрелки в поле в зависимости от браузера блокируются или не дают никакого эффекта (пример 1). Несмотря на такие запреты, в любом случае в поле самостоятельно можно вводить любые значения, включая текст. Атрибуты min и max работают только при использовании стрелок в поле.
Пример 1. Ограничение ввода чисел
Введите число от 1 до 10:
Если значение min превышает max , то атрибут min игнорируется.
Атрибут step задаёт шаг приращения и по умолчанию равен 1. В то же время значение может быть и дробным числом, как показано в примере 2.
Укажите нормальную среднюю температуру человека:
Результат примера продемонстрирован на рис. 2.
Рис. 2. Ввод дробных чисел в поле
Браузеры плохо поддерживают это поле, пока лишь это делает Chrome и Opera. В остальных браузерах поле для ввода числа приобретает вид обычного текстового поля.
Input type number
В HTML5 появилось специальное поле с атрибутом type=»number» для вода чисел. Рассмотрим его возможности.
Для поля доступны следующие атрибуты:
| Атрибут | Описание |
|---|---|
| step | Шаг изменения значения |
| max | Максимальное значение |
| min | Минимальное значение |
| placeholder | Подсказка |
| readonly | Только для чтения |
| disabled | Заблокирован |
| list | Связка со списком опций datalist по id |
| required | Обязательный для заполнения |
Шаг изменения
Атрибут step=»1″ задает на сколько будет увеличиваться или уменьшаться значение в поле. Может быть как целым (10) так и дробным (0.1).
Пример:
Минимальное значение
Атрибут min=»1″ задает минимально возможное значение value . Это значение должно быть меньше или равно значению max . Может быть целым, отрицательным или дробным.
Пример:
Максимальное значение
Атрибут max=»100″ задает максимально возможное значение value .
Пример:
Опции по умолчанию
У поля есть возможность задать список с рекомендуемыми значениями с помощью элемента .
Пример:
Валидация
Если указать атрибут required , то при отправки формы будет проверятся заполнено поле или нет, а также превышение введенного значения value в атрибутах min и max .
Проверить значение регулярным выражением с помощью атрибута pattern не получится, т.к. он не поддерживается.
Пример:
Также доступны CSS псевдо свойства :invalid и :valid , с помощью них можно применить стили к неправильно заполненному полю.
input[type="number"]:invalid+span:after < content: '✖'; padding-left: 5px; color: red; >input[type="number"]:valid+span:after