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

该类型具有一个值，用于控制哪些数字有效（以及 和 ），该值默认为 。步进按钮的实现也使用此值（即按下 up 会增加 ）。numberstepmaxmin1step

只需将此值更改为适当的值即可。对于钱，可能期望小数点后两位：

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

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

如果您希望允许任意数量的小数位，则可以使用（尽管对于货币，我建议坚持使用）。在 Chrome 和 Firefox 中，使用 时步进按钮将递增/递减 1。（感谢 Michal Stefanow 的回答指出，并在此处查看相关规范step="any"0.01anyany)

下面是一个 Playground，显示了各种步骤如何影响各种输入类型：

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

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

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

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

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

在 Chrome 中对我有用，未在其他浏览器中测试。

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

因此，它适用于：

2 没问题

2,5 是可以的

2.5 是 KO（该数字被视为“非法”，您会收到空值）。

您可以使用：

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

基于这个答案

<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 是（否则需要在 Firefox 上刷新页面）Backspace
• 46 是dot

&&is ， is 运算符。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）（其他浏览器不存在。

我这样做

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

您可以将 step 属性用于输入类型编号：

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

step="any"将允许任何小数点。
不允许小数。
将允许 0.5;1;1.5;...
将允许 0.1;0.2;0.3;0.4;...step="1"step="0.5"step="0.1"

我已经开始使用它与智能手机完美配合：inputmode="decimal"

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

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

对于桌面，您可以使用：

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

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

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

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

<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

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

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

在我的 iPad 上使用 React，对我来说并不完美。 对于介于 99.99999 - .00000 之间的浮点数，我使用正则表达式。对于所有没有浮点数的正两位数（例如 23），第一组为 true，或者对于第二组，例如 .12345。您可以将其用于任何正浮点数，只需更改范围或分别。type="number"(^[0-9]{0,2}$)|(^[0-9]{0,2}\.[0-9]{0,5}$)(...)|(...){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"
/>

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

是的，这是正确答案：

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

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