Is there a float input type in HTML5?

 

According to html5.org, the "number" input type's "value attribute, if specified and not empty, must have a value that is a valid floating point number."

Yet it is simply (in the latest version of Chrome, anyway), an "updown" control with integers, not floats: 

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

The number type has a step value controlling which numbers are valid (along with max and min ), which defaults to 1 . This value is also used by implementations for the stepper buttons (ie pressing up increases by step ).

Simply change this value to whatever is appropriate. For money, two decimal places are probably expected: 

<input type="number" step="0.01">

(I'd also set min=0 if it can only be positive)

If you'd prefer to allow any number of decimal places, you can use step="any" (though for currencies, I'd recommend sticking to 0.01 ). In Chrome & Firefox, the stepper buttons will increment / decrement by 1 when using any . (thanks to Michal Stefanow's answer for pointing out any , and see the relevant spec here)

Here's a playground showing how various steps affect various input types: 

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

Via: http://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/

But what if you want all the numbers to be valid, integers and decimals alike? In this case, set step to “any” 

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

Works for me in Chrome, not tested in other browsers.

Based on this answer 

<input type="text" id="sno" placeholder="Only float with dot !"   
   onkeypress="return (event.charCode >= 48 && event.charCode <= 57) ||  
   event.charCode == 46 || event.charCode == 0 ">

Meaning :

Char code :

  • 48-57 equal to 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
  • 0 is Backspace (otherwise need refresh page on Firefox)
  • 46 is dot

    • && is AND , || is OR operator.

    if you try float with comma : 

    <input type="text" id="sno" placeholder="Only float with comma !"   
     onkeypress="return (event.charCode >= 48 && event.charCode <= 57) ||  
     event.charCode == 44 || event.charCode == 0 ">

    Supported Chromium and Firefox (Linux X64) (other browsers I does not exist.)

    链接地址: http://www.djcxy.com/p/18660.html

    上一篇: 我如何将今天的日期设置为html中的默认日期

    下一篇: HTML5中是否有浮点输入类型？