HTML5 中有浮点输入类型吗？

Question

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>

Is there a floating point input element native to HTML5, or a way to make the number input type work with floats, not ints? Or must I resort to a jQuery UI plugin?

Answer 1

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:

<label for="totalAmt">Total Amount</label>
<input type="number" step="0.01" id="totalAmt">

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

---

As usual, I'll add a quick note: remember that client-side validation is just a convenience to the user. You must also validate on the server-side!

Answer 2

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.

Answer 3

您可以使用：

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

Answer 4

You can use the step attribute to the input type number:

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

step="any" will allow any decimal.
step="1" will allow no decimal.
step="0.5" will allow 0.5; 1; 1.5; ...
step="0.1" will allow 0.1; 0.2; 0.3; 0.4; ...

Answer 5

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

Answer 6

I do so

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

then, I define min in 0.4 and max in 0.7 with step 0.01: 0.4, 0.41, 0,42 ... 0.7

Answer 7

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

Answer 8

I have started using inputmode="decimal" which works flawlessly with smartphones:

<input type="text" inputmode="decimal" value="1.5">

Note that we have to use type="text" instead of number . However, on desktop it still allows letters as values.

For desktop you could use:

<input type="number" inputmode="decimal">

which allows 0-9 and . as input and only numbers.

Note that some countries use , as decimal dividor which is activated as default on the NumPad. Thus entering a float number by Numpad would not work as the input field expects a . (in Chrome). That's why you should use type="text" if you have international users on your website.

You can try this on desktop (also with Numpad) and your phone:

 <p>Input with type text:</p> <input type="text" inputmode="decimal" value="1.5"> <br> <p>Input with type number:</p> <input type="number" inputmode="decimal" value="1.5">

Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode

Answer 9

yes this is the correct answer:

step="any"

This is more efficient. Trust me.

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

 document.getElementById('form1').addEventListener('submit', function(e){ e.preventDefault(); alert("Your nnumber is: "+document.getElementById('n1').value) alert("This works no ? :) please upvote") })

 <form id="form1"> <input type="number" step="any" id="n1"> <button type="submit">Submit</button> </form> <!-- UPVOTE :)-->

Answer 10

I just had the same problem, and I could fix it by just putting a comma and not a period / full stop in the number because of French localization .

So it works with:

2 is OK

2,5 is OK

2.5 is KO (The number is considered "illegal" and you receive empty value).

Answer 11

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

This worked for me and i think is the easiest way to make the input field accept any decimal number irrespective of how long the decimal part is. Step attribute actually shows the input field how many decimal points should be accepted. Eg, step="0.01" will accept only two decimal points.

Answer 12

Using React on my IPad, type="number" does not work perfectly for me. For my floating point numbers in the range between 99.99999 - .00000 I use the regular expression (^[0-9]{0,2}$)|(^[0-9]{0,2}\.[0-9]{0,5}$) . The first group (...) is true for all positive two digit numbers without the floating point (eg 23), | or eg .12345 for the second group (...) . You can adopt it for any positive floating point number by simply changing the range {0,2} or {0,5} respectively.

<input
  className="center-align"
  type="text"
  pattern="(^[0-9]{0,2}$)|(^[0-9]{0,2}\.[0-9]{0,5}$)"
  step="any"
  maxlength="7"
  validate="true"
/>

Answer 13

This topic (eg step="0.01" ) relates to stepMismatch and is supported by all browsers as follows:

Answer 14

If any of the methods doesn't work you can use parse float.

 const totalAmt = document.getElementById("totalAmt"); totalAmt.addEventListener("change", (e)=>{ // e.preventDefault(e); const result = parseFloat(e.target.value); console.log(result) });

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