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

Ответ 1

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

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

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

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

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

Ответ 2

Через: http://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/

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

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

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

Ответ 3

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

<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

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

Ответ 4

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

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

надеюсь помочь, считает

Ответ 5

Я делаю это

 <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

Ответ 6

Вы можете использовать атрибут 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;...

Ответ 7

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

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

2 ОК

2,5 в порядке

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