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

536

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

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

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

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

Теги:
floating-point
input

7 ответов

1147
Лучший ответ

Тип 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>

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

Поделиться
  • 1
    Чтобы ответить на правку @ Elfayer's: цитаты необязательны в HTML, если вы не хотите использовать определенные символы. Лично я предпочитаю опускать их, где это возможно, для лучшей читабельности.
  • 5
    Это не работает правильно в последних версиях Firefox: bugzilla.mozilla.org/show_bug.cgi?id=1003896
Показать ещё 11 комментариев
100

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

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

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

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

Поделиться
  • 4
    Chrome => отлично работает Safari => не будет отображать сообщение об ошибке, и если не номер, он не будет передаваться на сервер IE => Версия менее 10 не работает, работает
  • 2
    К сожалению, в Chrome он позволяет вводить несколько десятичных знаков, например, IP-адрес.
Показать ещё 1 комментарий
10

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

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

Поделиться
  • 0
    Чувствует себя отсталым Как насчет копирования и вставки в поле?
Показать ещё 4 комментария
9

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

<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

Поделиться
3

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

2,5 в порядке

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

Поделиться
  • 0
    добавьте lang = "en" для ввода или любого родителя, и он начнет использовать стиль английского номера

Ещё вопросы

Сообщество Overcoder
Наверх
Меню