Есть ли в HTML5 тип ввода с плавающей точкой?

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

Тем не менее, это просто (в последней версии Chrome, во всяком случае) элемент управления «обновлением» с целыми числами, а не с плавающей точкой:

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

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

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

Просто измените это значение на то, что подходит. За деньги, вероятно, ожидается два десятичных знака:

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

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

Если вы предпочитаете использовать любое количество десятичных знаков, вы можете использовать их step="any"(хотя для валют я бы рекомендовал придерживаться 0.01). В Chrome и Firefox кнопки управления шагом увеличиваются / уменьшаются на 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>

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

Через: 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"позволит любое десятичное число
step="1"не допустит десятичной дроби.
step="0.5"позволит 0,5; 1; 1,5; ...
step="0.1"позволит 0,1; 0,2; 0,3; 0,4; ...

На основании этого ответа

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

Смысл :

Код символа:

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

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

Я делаю так

 <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

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

Так что это работает с:

2 в порядке

2,5 в порядке

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