当我需要存储不同精度的浮点数时，如何定义 HTML 输入字段？

Posted 2023-04-13

【中文标题】当我需要存储不同精度的浮点数时，如何定义 HTML 输入字段？

【英文标题】：How to define HTML's input field when I need to store floating numbers of varying precision?

【发布时间】：2017-12-12 17:16:51

【问题描述】：

我需要一个可以存储数字的输入表单元素：

4.6050927694997500 0.0384623400229826 -0.0000317620199043 等

目前为了能够输入这样的数字，html 规范要求您设置一个步长值，如下所示：

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

用这么多零定义一个如此小的步长值对我来说感觉有点奇怪。

有没有更好的方法来做到这一点？我应该只对浮点数使用text 字段类型而不是number？

【参考方案1】：

是的，这是个好主意您必须使用text 字段（它没有向上/向下按钮 - 您可以使用 JS 来创建它们）。最好使用pattern 属性通知用户输入无效。

<!-- TRY THIS SNIPPET -->

negative or positive
<input pattern="-?[0-9]+(\.[0-9]+)?" value="0">
<hr>

only positive
<input pattern="[0-9]+(\.[0-9]+)?" value="0">

<hr>

negative or positive supporting "scientific" format (eg. 5.3e-5)
<input pattern="-?[0-9]+(\.[0-9]+)?([eE]-?[0-9]+)?" value="0">

<hr>

positive supporting "scientific" format (eg. 5.3e-5)
<input pattern="[0-9]+(\.[0-9]+)?([eE]-?[0-9]+)?" value="0">

<hr>
Try entering some numbers (5, -5, 5.5, -5.5, -4.556e5, 4.556e5)

另外（如type=number 字段的情况）在服务器上检查它（如果已发送）。