Відповідно до html5.org, атрибут "number" типу вводу "value", якщо він вказаний і не порожній, повинен мати значення, яке є дійсним числом з плаваючою комою;
Але це просто (у всякому разі, в останній версії 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" value="" />2 підходить
2,5 підходить
2,5 - KO (число вважається &quo ;нелегальним&quo ; і ви отримуєте пусте значення).