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

Question

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

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

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

是否存在HTML5原生的浮点输入元素，或者使数字输入类型与浮点数一起工作的方法，而不是整数？或者我必须使用jQuery UI插件吗？

Answer 1

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

只需将此值更改为适当的值即可。为了钱，可能需要两位小数：

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

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

如果您希望允许任意数量的小数位，可以使用step="any"（但对于货币，我建议坚持使用0.01）。在Chrome＆amp; Firefox，使用any时，步进按钮将递增/递减1。 （感谢Michal Stefanow回答指出any和see the relevant spec here）

这是一个操场，显示各种步骤如何影响各种输入类型：

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

  

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

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

---

在Chrome中适用于我，未在其他浏览器中测试过。

Answer 3

你可以使用：

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

希望能提供帮助，问候

Answer 4

基于this回答

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

意义：

Char code：

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

您可以将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 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">

然后，我将min定义为0.4，最大值定义为0.7，步骤0.01：0.4,0.41,0,42 ...... 0.7

Answer 7

我已经开始使用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"。

您可以在台式机上（也可以在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 8

是的，这是正确答案：

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 9

我遇到了同样的问题，我可以通过在逗号而不是期限 / 完整停止中修复它由于法语本地化而导致的数字。

所以它适用于：

2没问题

2,5没关系

2.5是KO（该号码被认为是＃34;非法＆＃34;并且您收到空值）。

Answer 10

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

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

Answer 11

此主题（例如 QPushButton）与 stepMismatch 相关，并得到所有 browsers 的支持，如下所示：

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