Есть ли тип ввода float в HTML5?

согласно html5.org, атрибут "value" типа "number", если он указан и не пуст, должен иметь значение, которое является допустимым числом с плавающей запятой."

но это просто (в последней версии Chrome, во всяком случае), элемент управления "updown" с целыми числами, а не плавает:

<input type="number" id="totalAmt"></input>

есть ли элемент ввода с плавающей запятой, родной для HTML5, или способ заставить тип ввода номера работать с поплавками, а не с ints? Или должен? прибегнуть к плагину jQuery UI?

7 ответов


на number типа step значение, контролирующее, какие числа действительны (наряду с max и min), который по умолчанию 1. Это значение также используется реализациями для кнопок stepper (т. е. нажатие вверх увеличивается на step).

просто измените это значение на то, что подходит. Для денег, вероятно, ожидаются два знака после запятой:

<input type="number" step="0.01">

(Я бы тоже поставил min=0 если он может быть только положительными)

если вы предпочитаете чтобы разрешить любое количество знаков после запятой, вы можете использовать step="any" (хотя для валют, я бы рекомендовал придерживаться 0.01). В Chrome и Firefox кнопки stepper будут увеличиваться / уменьшаться на 1 при использовании any. (спасибо ответу Михала Стефанова за указание any и см. соответствующую спецификацию здесь)

вот игровая площадка, показывающая, как различные шаги влияют на различные типы ввода:

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

As обычно, я добавлю небольшое примечание: помните, что проверка на стороне клиента-это просто удобство для пользователя. Вы также должны проверить на стороне сервера!


Via: http://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/

но что, если вы хотите, чтобы все числа были действительными, целыми и десятичными числами? В этом случае задайте шаг "any"

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

работает для меня в Chrome, не проверял в других браузерах.


на основе этой ответ

<input type="text" id="sno" placeholder="Only float with dot !"   
   onkeypress="return (event.charCode >= 48 && event.charCode <= 57) ||  
   event.charCode == 46 || event.charCode == 0 ">

значение :

код Char:

  • 48-57 равна 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
  • 0 имеет вид Backspace(в противном случае нужно обновить страницу в Firefox)
  • 46 и dot

&& is AND , || is OR оператора.

если вы попробуете float с запятой:

<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 64-разрядная версия)(других браузеров я не существует.)


вы можете использовать:

<input type="number" step="any" min="0" max="100" value="22.33">

надеюсь помочь, с уважением


Я делаю так

 <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


вы можете использовать атрибут step для номера типа ввода:

<input type="number" id="totalAmt" step="0.1"></input>

step="any" позволит любой десятичную.
step="1" не допускает десятичного знака.
step="0.5" позволит 0.5; 1; 1.5; ...
step="0.1" позволит 0.1; 0.2; 0.3; 0.4; ...


У меня была такая же проблема, и я мог бы исправить ее, просто поставив запятая, а не период/полная остановка в числе из-за французская локализация.

поэтому он работает с:

2 ОК

2,5 ОК

2.5 - KO (число считается "незаконным", и вы получаете пустое значение).