HTML5中是否有浮点输入类型？

Is there a float input type in HTML5?

根据html5.org，"number"输入类型的"value"属性，如果指定且不为空，则必须具有有效的浮点数。

然而，它只是(无论如何，在最新版本的chrome中)一个带有整数的"updown"控件，而不是浮动的：

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

有没有一个HTML5自带的浮点输入元素，或者一种让数字输入类型使用浮点数而不是整数的方法？还是必须使用jquery用户界面插件？

number类型有一个step值，控制哪些数字有效(与max和min一起使用)，默认为1。该值也可用于步进器按钮的实现(即，按向上增加step)。

只需将该值更改为适当的值。对于货币，可能需要两位小数：

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

(如果只能是肯定的话，我也会设置min=0)

如果您愿意允许任何小数位数，您可以使用step="any"(不过对于货币，我建议使用0.01)。在chrome&firefox中，使用any时，步进器按钮将增加/减少1。(感谢Michal Stefanow的回答，他指出了any，请参阅此处的相关规范)

以下是一个游乐场，展示了各种步骤如何影响各种输入类型：

1
2
3
4
5
6
7
8
9
10
11
12
13

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

像往常一样，我会添加一个简短的注释：记住客户端验证对用户来说只是一种方便。您还必须在服务器端验证！

相关讨论

要响应@elfayer的编辑：引号在HTML中是可选的，除非您想使用某些字符。就我个人而言，为了提高可读性，我宁愿尽可能省略它们。
这在最新版本的firefox中不能正常工作：bugzilla.mozilla.org/show_bug.cgi？ID＝1003896
为了总结这个错误，火狐现在尽可能地截断0，所以4.10将显示为4.1。仍然是技术上正确的行为(规范只要求它显示适当的浮点表示)，但对于货币来说是一个糟糕的用户界面。我鼓励人们投票支持那个错误。看起来他们可能会要求一个新的标准属性来控制显示。
@戴夫：是的，从技术上讲，省略引号是很好的，它引入了许多潜在的问题。首先，在不同的浏览器及其版本中，对字符的子集进行不同的处理。如果选择不使用引号，则必须不断了解哪些字符将在每个浏览器和版本中造成问题。如果你只使用引语，那么你的精神力量就会投入到一些根本不需要担心的事情上。(续)
第二，虽然您可以担心哪些字符是好的，哪些字符不是，但后面的开发人员可能不会。这就要求它们要么忍受向所有未加引号的属性添加引号的艰巨任务，要么更糟，只需在代码中引入问题，它们甚至可能不了解其来源。最后，由于有时必须使用引号，因此代码看起来与引用的某些属性不一致，而其他属性则不一致。
可以隐藏数字递增器吗
@请参阅此处：stackoverflow.com/q/3790935/1180785，但请务必阅读每个答案的注释；看起来所有选项都有缺点，您需要了解什么适合您的特定需求。
@戴夫：数据应该以十进制(10,2)的形式存储在数据库中，还是应该使用其他东西？我问是因为当我使用这种输入类型时，点后面的所有内容都不会被插入。我尝试用floatVal()转换，但不起作用。当我在输入mysql中输入37.50时，这个数字存储为37.00。你有线索吗？stackoverflow.com/questions/43164412/&hellip；
如果我这样使用它，它是由我自己操作的，但我尝试手动添加，而不是接受。我们可以手动添加吗？
人们应该真正记住并学会使用XHTML标准…它回答一些简单的问题，比如关于引号的问题。许多年前，我强迫自己学习这些标准……w3.org/tr/xhtml1/h-4.4 All attribute values must be quoted, even those which appear to be numeric.引用只是在自找麻烦。如果你有动态的内容/值，那么更多。
在Google Chrome 62.0.3202.94中，datetime本地版的步骤似乎不起作用，在2013年写回答案时，您想到了哪些浏览器？
@当时datetime local上的ferrybig步骤也没有完全工作。我添加它们是因为它在规范中，我希望人们能够看到什么是有效的，什么是无效的。不幸的是，事情还没有发生。结果可能比他们预期的要困难得多。不过，它应该适用于整分钟/整小时/整天的步骤(至少在Chrome62中是这样的；只有我发布的代码片段中的最后一个示例不起作用)。
这太随机了，我在这么多年的编程中都不知道这一点。始终使用的文本：)

通过：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"

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

在Chrome中对我有效，而不是在其他浏览器中测试。

相关讨论

你可以使用：

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

希望能帮忙，问候

基于这个答案

1
2
3

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

含义：

字符代码：

48-57等于0, 1, 2, 3, 4, 5, 6, 7, 8, 9。
0是Backspace(否则需要在firefox上刷新页面)
46是dot。

&&为AND，||为OR运算符。

如果尝试用逗号浮动：

1
2
3

<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)(其他浏览器我不存在。)

相关讨论

可以使用输入类型编号的step属性：

1	<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；…

我这样做

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

然后，我用步骤0.01定义了0.4中的最小值和0.7中的最大值：0.4、0.41、0.42…零点七

我也遇到了同样的问题，我可以通过在数字中加逗号而不是句号/句号来解决，因为法语本地化了。

因此，它适用于：

2可以

2，5可以

2.5是ko(该数字被视为"非法"，您将收到空值)。

相关讨论