HTML5 中有浮点输入类型吗？

Question

根据html5.org ，“数字”输入类型的“值属性，如果指定且不为空，则必须具有一个有效浮点数的值。”

然而，它只是（无论如何在最新版本的 Chrome 中），一个带有整数的“updown”控件，而不是浮点数：

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

是否有 HTML5 原生的浮点输入元素，或者有一种方法可以使数字输入类型与浮点数一起使用，而不是整数？ 还是我必须求助于 jQuery UI 插件？

Answer 1

number类型有一个step值，用于控制哪些数字是有效的（以及max和min ），默认为1 。 该值也被用于步进按钮的实现（即按step增加）。

只需将此值更改为适当的值。 对于金钱，可能需要保留小数点后两位：

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

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

如果您希望允许任何小数位数，您可以使用step="any" （尽管对于货币，我建议坚持使用0.01 ）。 在 Chrome 和 Firefox 中，使用any . （感谢 Michal Stefanow 指出any问题的答案，并在此处查看相关规范）

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

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

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

但是，如果您希望所有数字都是有效的，整数和小数都一样怎么办？ 在这种情况下，将 step 设置为“any”

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

---

在 Chrome 中为我工作，未在其他浏览器中测试。

Answer 3

您可以使用：

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

Answer 4

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

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

Answer 5

基于这个答案

<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运算符。

如果您尝试使用逗号浮动：

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

Answer 6

我这样做

 <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.4 中定义最小值，在 0.7 中定义最大值，步长为 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

我已经开始使用inputmode="decimal" ，它可以在智能手机上完美运行：

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

请注意，我们必须使用type="text"而不是number 。 但是，在桌面上它仍然允许字母作为值。

对于桌面，您可以使用：

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

这允许0-9和. 作为输入且仅作为数字。

请注意，某些国家/地区使用,作为小数除数，它在 NumPad 上默认激活。 因此，通过 Numpad 输入浮点数将无法正常工作，因为输入字段需要. （在铬）。 这就是为什么如果您的网站上有国际用户，您应该使用type="text" 。

您可以在桌面（也可以使用 Numpad）和手机上尝试此操作：

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

参考： https ://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode

Answer 9

是的，这是正确的答案：

step="any"

这样更有效率。 相信我。

 <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

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

所以它适用于：

2没问题

2,5还可以

2.5 是 KO（该数字被认为是“非法的”并且您收到空值）。

Answer 11

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

这对我有用，我认为这是让输入字段接受任何十进制数字的最简单方法，而不管小数部分有多长。 Step 属性实际上显示了输入字段应该接受多少个小数点。 例如，step="0.01" 将只接受两个小数点。

Answer 12

在我的 iPad 上使用 React， type="number"对我来说并不完美。 对于 99.99999 - .00000 范围内的浮点数，我使用正则表达式(^[0-9]{0,2}$)|(^[0-9]{0,2}\.[0-9]{0,5}$) 。 第一组(...)对于所有不带浮点的正两位数 (例如 23) 为真， | 或例如 .12345 用于第二组(...) 。 您可以通过简单地分别更改范围{0,2}或{0,5}将其用于任何正浮点数。

<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

该主题（例如step="0.01" ）与 stepMismatch 相关，所有浏览器都支持如下：

Answer 14

如果任何方法都不起作用，您可以使用 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" />