在HTML（5）中是否有浮点输入类型？ [英] Is there a float input type in HTML(5)?

问题描述

根据 http://simon.html5.org/html-elements ，数字输入类型的 value属性，如果指定而不是空的，则必须具有一个有效的浮点数值。

然而，简单地说（在Chrome.latest中，无论如何），使用整数的updown控件，而不是浮动：

body {background-code-css lang-css prettyprint- color：lightyellow;} header {font-family：'Segoe UI'，'Segoe Light'，'Courier New'，sans-serif; // font-weight：bold; padding-left：15px;背景颜色：蓝色; color：White;} label {font-family：Consolas，'Segoe UI'，sans-serif; margin-left：10px; min-width：120px;} input {float：right;}。clearBoth {clear：both;}

有没有一个原生的HTML5浮点输入元素，或者方式使数字输入类型工作与浮动，而不是整数？或者我必须求助于一个jQuery UI插件？

解决方案

类型有一个步骤值来控制哪些数字是有效的（以及 max 和 min ），默认为 1 。这个值也用于步进按钮的实现（例如按 step> ）。



这个数值到什么都合适。对于金钱来说，可能会有两位小数：



 < input type =numberstep =0.01> 
  

（我也会设置 min = 0 如果它只能是正数）



如果您想要允许任意数量的小数位，您可以使用 step =any （尽管对于货币，我建议坚持 0.01 ）。在Chrome& Firefox，当使用 any 时，步进按钮将递增/递减1。 （感谢Michal Stefanow的回答，指出任何和请参阅相关规范）各种输入类型：



< form> < input type = number step = 1 />第1步（默认）< br /> <输入类型=编号步骤= 0.01 />步骤0.01< br /> < input type = number step = any />步骤任何< br /> <输入类型=范围步长= 20 />步骤20< br /> < input type = datetime-local step = 60 />步骤60（默认）< br /> < input type = datetime-local step = 1 />第1步< br /> < input type = datetime-local step = any />步骤任何< br /> < input type = datetime-local step = 0.001 />步骤0.001< br /> < input type = datetime-local step = 3600 />步骤3600（1小时）< br /> < input type = datetime-local step = 86400 />步骤86400（1天）< br /> < input type = datetime-local step = 70 />步骤70（1分10秒）< br />< / form>

像往常一样，我会添加一个快速提示：请记住，客户端验证对用户来说只是一种方便。您还必须在服务器端进行验证！

According to http://simon.html5.org/html-elements, 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 Chrome.latest, anyway), an "updown" control with integers, not floats:

body {
  background-color: lightyellow;
}
header {
  font-family:'Segoe UI', 'Segoe Light', 'Courier New', sans-serif;
  //font-weight: bold;
  padding-left: 15px;
  background-color: Blue;
  color: White;
}
label {
  font-family: Consolas, 'Segoe UI', sans-serif;
  margin-left: 10px;
  min-width: 120px;
}
input {
  float:right;
}
.clearBoth {
  clear:both;
}

<header>New Delivery - @SerialNumber</header>
</br>
<label>Invoice #</label>
<input type="text" id="invoiceNumber"></input>
<div class="clearBoth"></div>
<label>Date</label>
<input type="date" id="date"></input>
<div class="clearBoth"></div>
<label>Total Amt $</label>
<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?

解决方案

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 (i.e. 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>

---

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!

这篇关于在HTML（5）中是否有浮点输入类型？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！