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


819

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

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

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

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

Ответы:


1665

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>


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


1
Чтобы ответить на правку @ Elfayer's: цитаты необязательны в HTML, если вы не хотите использовать определенные символы. Лично я предпочитаю опускать их, где это возможно, для лучшей читабельности.
Дейв

5
Это не работает правильно в последних версиях Firefox: bugzilla.mozilla.org/show_bug.cgi?id=1003896
trpt4him

7
@Dave: Да, технически, опускать кавычки - это хорошо, но это создает массу потенциальных проблем. Во-первых, подмножество символов обрабатываются по-разному в разных браузерах и их версиях. Если вы решите не использовать кавычки, вы должны постоянно знать, какие символы будут вызывать проблемы в каждом браузере и версии. Это большая умственная сила, посвященная чему-то, о чем вообще не нужно беспокоиться, если вы просто используете кавычки. (продолжение)
Крис Пратт

9
Во-вторых, хотя вы можете беспокоиться о правилах, какие символы хороши, а какие нет, разработчик, который придет за вами, вероятно, не будет. Тогда для этого требуется, чтобы они либо выдержали сложную задачу добавления кавычек ко всем атрибутам, которые вы оставили без кавычек, или, что еще хуже, просто привносили в код проблемы, которые они могут даже не понять источника. Наконец, поскольку иногда вам придется использовать кавычки, код выглядит несовместимым с некоторыми указанными атрибутами, а с другими нет.
Крис Пратт

2
@relipse смотрите здесь: stackoverflow.com/q/3790935/1180785 но обязательно прочитайте комментарии к каждому ответу; похоже, что у всех опций есть недостатки, и вам нужно посмотреть, что соответствует вашим конкретным потребностям.
Дейв

153

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

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

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

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


4
Chrome => отлично работает Safari => не будет отображать сообщение об ошибке, и если не номер, он не будет передаваться на сервер IE => Версия меньше 10 не работает, работает
Abhi

4
К сожалению, в Chrome он позволяет вводить несколько десятичных знаков, например, IP-адрес.
Энди

18

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

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

12

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

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


9

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

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


Чувствует себя отсталым Как насчет копирования и вставки в поле?
Марс Робертсон


4
Взлом для ввода, взломать для копирования и вставки, взломать сверху взломать = плохая практика. У нас есть 2017
Марс Робертсон

Где вы читали какие-либо пароли ввода? Кому какое дело после сеанса? Нет, у нас 1856! Попробуйте другого пользователя!
dsgdfg

Звучит слишком сложно, но рассуждения об этом методе в отличие от других упомянутых не предоставлены
WebDude0482

6

Я делаю так

 <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


4

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

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

2 в порядке

2,5 в порядке

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


3
добавьте lang = "en" для ввода или любого родителя, и он начнет использовать стиль английского номера
user1040495
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.