Чи існує тип введення з поплавком у HTML5?

За повідомленням html5.org , значення "число" типу "введення", якщо він вказаний і не порожній, повинен мати значення, яке є дійсним номером з плаваючою комою ".

Але це просто (в останній версії Chrome, все одно), управління "вниз" цілими числами, а не плаває:

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

Чи є вхідний елемент з плаваючою комою для HTML5 чи спосіб змусити тип введення числа працювати з поплавками, а не з ints? Або я повинен вдатися до плагіна 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">

Ви можете використовувати атрибут 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; ...

Виходячи з цієї відповіді

<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) (інших браузерів у мене не існує)

Я так роблю

 <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 (число вважається "незаконним", і ви отримуєте порожнє значення).