HTML5 中有浮点输入类型吗？

Posted 2023-03-31

【中文标题】HTML5 中有浮点输入类型吗？

【英文标题】：Is there a float input type in HTML5?

【发布时间】：2022-01-15 12:01:00

【问题描述】：

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

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

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

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

【参考方案1】：

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

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

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

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

如果您希望允许使用任意数量的小数位，可以使用step="any"（但对于货币，我建议坚持使用0.01）。在 Chrome 和 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>

---

像往常一样，我将添加一个简短的说明：请记住，客户端验证只是为用户提供便利。您还必须在服务器端进行验证！

【讨论】：

回复@Elfayer 的编辑：引号在HTML 中是可选的，除非您想使用某些字符。我个人更喜欢在可能的情况下省略它们以提高可读性。

这在最新版本的 Firefox 中无法正常工作：bugzilla.mozilla.org/show_bug.cgi?id=1003896

@Dave：是的，从技术上讲，省略引号很好，但它会引入许多潜在问题。首先，字符子集在不同浏览器及其版本中的处理方式不同。如果您选择不使用引号，那么您必须不断意识到哪些字符会在每个浏览器和版本中导致问题。如果您只使用引号，那么将大量的精神力量投入到根本不需要担心的事情上。 （续）

第二，虽然您可能不必担心哪些字符可以正常，哪些不可以，但您后面的开发人员可能不会。这就要求他们要么忍受为您未引用的所有属性添加引号的艰巨任务，要么更糟的是，只是将问题引入代码中，他们甚至可能不了解其来源。最后，由于有时您必须使用引号，因此代码看起来与引用的某些属性不一致，而其他属性则不然。

@relipse 见这里：***.com/q/3790935/1180785 但请务必阅读每个答案的 cmets；看起来所有选项都有缺点，您需要查看适合您特定需求的选项。

【参考方案2】：

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

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

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

---

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

【讨论】：

Chrome => 完美运行 Safari => 不会显示错误消息，如果不是数字，它不会传递给服务器 IE => 版本小于 10 不行，工作

不幸的是，在 chrome 中，它允许您输入多个小数点，例如 IP 地址。

@Andy 较新版本的 chrome 已修复。这应该是当今公认的答案。

【参考方案3】：

你可以使用：

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

【参考方案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; ...

【参考方案5】：

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

意思：

字符代码：

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

【讨论】：

感觉落后了。在字段中复制和粘贴怎么样？

use this method, but need validation before inserting@MichalStefanow

黑客输入，黑客复制和粘贴，黑客在黑客之上 = 不好的做法。我们有 2017

您在哪里阅读过任何密码输入？谁在乎会话后使用哪种方法？不，我们有 1856 ！尝试其他用户！

听起来太复杂了，但是，与其他提到的方法相比，没有提供这种方法的推理

【参考方案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

【参考方案7】：

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

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

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

对于桌面，您可以使用：

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

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

请注意，某些国家/地区使用, 作为十进制除数，这在数字键盘上默认激活。因此，通过 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

【参考方案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 :)-->

【参考方案9】：

我也遇到了同样的问题，我可以通过在法语本地化。

所以它适用于：

2 没问题

2,5 还可以

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

【讨论】：

将 lang="en" 添加到输入或任何父级，它将开始使用英文数字样式

【参考方案10】：

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

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

【参考方案11】：

在我的 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"
/>

【参考方案12】：

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

【参考方案13】：

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