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

Question

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

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

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

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

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

820 7

html5 floating-point input

7 ответов:

Comments

Ничего не найдено.

Dave · Accepted Answer · 2016-08-09 19:01:57

The number типа step значение, управляющее допустимыми числами (вместе с max и min), который по умолчанию 1. Это значение также используется реализациями для кнопок stepper (т. е. нажатие вверх увеличивается на 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>
как обычно, я добавлю небольшое примечание: помните, что проверка на стороне клиента-это просто удобство для пользователя. Вы также должны проверить на стороне сервера!

Michal Stefanow · Accepted Answer · 2014-07-24 00:25:53

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

но что, если вы хотите, чтобы все числа были действительны, целые и десятичные числа? В этом случае установите шаг "любой"
<input type="number" step="any" />
работает для меня в Chrome, не проверял в других браузерах.

dsgdfg · Accepted Answer · 2017-05-23 15:18:30

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

alvarodoune · Accepted Answer · 2016-03-15 20:39:13

вы можете использовать:
<input type="number" step="any" min="0" max="100" value="22.33">
надеюсь помочь, с уважением

sadalsuud · Accepted Answer · 2017-06-13 17:26:54

Я так и делаю
 <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

Andrei Thuler · Accepted Answer · 2018-02-25 21:46:54

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

Stephane · Accepted Answer · 2017-02-02 17:06:22

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

Так он работает с:

2 ОК

2,5 ОК

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