Согласно html5.org, атрибут value типа input «number», если он указан и не пуст, должен иметь значение, которое является допустимым числом с плавающей запятой.«
Тем не менее, это просто (в последней версии Chrome, во всяком случае), «расширяющий» элемент управления с целыми числами, а не с плавающей запятой:
& Лт;!- начать фрагмент: js hide: ложная консоль: истинная павиана: false - >
<input type="number" id="totalAmt"></input>
& Лт;!- конец фрагмента - >
Существует ли элемент ввода с плавающей запятой, свойственный HTML5, или способ заставить тип ввода чисел работать с поплавками, а не с ints? Или я должен прибегнуть к плагину jQuery UI?
Тип number
имеет значение step
, контролирующее, какие числа действительны (вместе с max
и min
), что по умолчанию означает 1
. Это значение также используется реализациями для кнопок степпера (т.е. нажатие увеличивается на шаг
).
Просто измените это значение на любое подходящее. За деньги, вероятно, ожидаются два десятичных знака:
<input type="number" step="0.01">
(Я бы также установил min = 0
, если это может быть только положительным)
Если вы предпочитаете разрешать любое количество десятичных знаков, вы можете использовать step = "any"
(хотя для валют я бы порекомендовал придерживаться 0.01
). В Chrome & Firefox, кнопки stepper будут увеличиваться / уменьшаться на 1 при использовании any
. (спасибо ответу Михала Стефанова за указание «любой», и см. соответствующую спецификацию здесь)
Вот игровая площадка, показывающая, как различные шаги влияют на различные типы ввода:
& Лт;!- начать фрагмент: js hide: ложная консоль: истинная павиана: false - >
<form>
<input type=number step=1 /> Step 1 (default)<br />
<input type=number step=0.01 /> Step 0.01<br />
<input type=number step=any /> Step any<br />
<input type=range step=20 /> Step 20<br />
<input type=datetime-local step=60 /> Step 60 (default)<br />
<input type=datetime-local step=1 /> Step 1<br />
<input type=datetime-local step=any /> Step any<br />
<input type=datetime-local step=0.001 /> Step 0.001<br />
<input type=datetime-local step=3600 /> Step 3600 (1 hour)<br />
<input type=datetime-local step=86400 /> Step 86400 (1 day)<br />
<input type=datetime-local step=70 /> Step 70 (1 min, 10 sec)<br />
</form>
& Лт;!- конец фрагмента - >
Как обычно, я добавлю краткое примечание: помните, что проверка на стороне клиента - это просто удобство для пользователя. Вы также должны проверить на стороне сервера!
Через: http://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/
Но что, если вы хотите, чтобы все числа были действительными, как целые числа, так и десятичные дроби?? В этом случае установите шаг «любой»
<input type="number" step="any" />
Работает для меня в Chrome, не тестируется в других браузерах.
Вы можете использовать:
<input type="number" step="any" min="0" max="100" value="22.33">
Вы можете использовать атрибут шага для номера типа ввода:
<input type="number" id="totalAmt" step="0.1"></input>
step = "any"
разрешит любой десятичный знак.& Лт; br / >
step = "1"
не допускает десятичного разряда.& Лт; br / >
step = "0.5"
разрешит 0,5; 1; 1,5; ; ...& Лт; br / >
step = "0.1"
позволит 0,1; 0,2; 0,3; 0,4; ...& Лт; br / >
На основании [этого][1] ответа
<input type="text" id="sno" placeholder="Only float with dot !"
onkeypress="return (event.charCode >= 48 && event.charCode <= 57) ||
event.charCode == 46 || event.charCode == 0 ">
Смысл:
Чар код:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
& &
isAND
, | |
- оператор OR
.
если вы попробуете плавать с запятой:
<input type="text" id="sno" placeholder="Only float with comma !"
onkeypress="return (event.charCode >= 48 && event.charCode <= 57) ||
event.charCode == 44 || event.charCode == 0 ">
Поддерживаемые Chromium и Firefox (Linux X64) (других браузеров у меня не существует.)
[1]: https://stackoverflow.com/questions/469357/html-text-input-allow-only-numeric-input?page = 1 & tab = голоса # tab-top
Я так делаю
<input id="relacionac" name="relacionac" type="number" min="0.4" max="0.7" placeholder="0,40-0,70" class="form-control input-md" step="0.01">
затем я определяю min в 0,4 и max в 0,7 с шагом 0,01: 0,4, 0,41, 0,42 ... 0,7
У меня просто была та же проблема, и я мог бы ее решить, просто поместив запятую , а не период / полный стоп в число из-за французской локализации .
Так работает с:
< input type = "number" value = "" / >
2 в порядке
2,5 в порядке
2.5 - это нокауты (число считается «незаконным», и вы получаете пустое значение).