Html HTML5 中是否有浮动输入类型？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19011861/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a float input type in HTML5?
提问by B. Clay Shannon
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."
根据html5.org，“数字”输入类型的“值属性，如果指定且不为空，则必须具有一个有效浮点数的值”。
Yet it is simply (in the latest version of Chrome, anyway), an "updown" control with integers, not floats:
然而，它只是（无论如何在最新版本的 Chrome 中），一个带有整数的“上下”控件，而不是浮点数：
<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?
是否有 HTML5 原生的浮点输入元素，或者有一种方法可以使数字输入类型与浮点数一起使用，而不是整数？还是我必须求助于 jQuery UI 插件？
回答by Dave
The numbertype has a stepvalue controlling which numbers are valid (along with maxand min), which defaults to 1. This value is also used by implementations for the stepper buttons (i.e. pressing up increases by step).
该number类型有一个step值控制哪些数字是有效的（以及max和min），默认为1。该值也用于步进器按钮的实现（即向上按增加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=0if it can only be positive)
（我也会设置min=0它是否只能是正数）
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)
如果您希望允许任意数量的小数位，您可以使用step="any"（尽管对于货币，我建议坚持使用0.01）。在 Chrome 和 Firefox 中，使用any. （感谢 Michal Stefanow 的回答指出any，并在此处查看相关规范）
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!
像往常一样，我会添加一个简短的说明：请记住，客户端验证只是为了方便用户。您还必须在服务器端进行验证！
回答by Mars Robertson
Via: http://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/
通过：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”
但是，如果您希望所有数字（整数和小数）都有效，该怎么办？在这种情况下，将 step 设置为“any”
<input type="number" step="any" />
Works for me in Chrome, not tested in other browsers.
在 Chrome 中适用于我，未在其他浏览器中测试。
回答by alvarodoune
You can use:
您可以使用：
<input type="number" step="any" min="0" max="100" value="22.33">
回答by Andrei Thuler
You can use the step attribute to the input type number:
您可以将 step 属性用于输入类型编号：
<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; ...
step="any"将允许任何小数。step="1"将不允许小数点。step="0.5"将允许 0.5；1; 1.5; ...step="0.1"将允许 0.1；0.2; 0.3; 0.4; ...
回答by dsgdfg
Based on thisanswer
基于这个答案
<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
- 48-57 等于
0, 1, 2, 3, 4, 5, 6, 7, 8, 9 - 0 是
Backspace（否则需要在 Firefox 上刷新页面） - 46 是
dot
&&is AND, ||is ORoperator.
&&是AND，||是OR运算符。
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.)
支持 Chromium 和 Firefox (Linux X64)（其他浏览器我不存在。）
回答by sadalsuud
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
然后，我在 0.4 中定义最小值，在 0.7 中定义最大值，步长为 0.01：0.4, 0.41, 0,42 ... 0.7
回答by Stephane
I just had the same problem, and I could fix it by just putting a commaand not a period/full stopin the number because of French localization.
我刚刚遇到了同样的问题，由于法语本地化，我可以通过在数字中添加逗号而不是句号/句号来解决它。
So it works with:
所以它适用于：
2 is OK
2 没问题
2,5 is OK
2,5 没问题
2.5 is KO (The number is considered "illegal" and you receive empty value).
2.5 是 KO（该数字被视为“非法”并且您收到空值）。
