HTML数字输入框step和min属性的小数位数限制及浏览器差异问询

问题背景 #

为适配ERC20代币最多18位小数的特性，你使用了如下HTML数字输入框代码：

<input name="amount" type="number" min="0.000000000000000001" step="0.000000000000000001" />

但浏览器无法识别该属性值，导致步进（上下箭头）功能失效，仅Firefox在设置16位小数0.0000000000000001时可正常工作。

标准与精度限制的关系 #

HTML标准并没有明文限制step和min的小数位数，但问题根源在于IEEE 754双精度浮点数的精度限制：

• 浏览器底层用双精度浮点数处理数字输入框的数值，这种格式最多能精确表示15-17位有效数字。
• 18位小数的step（即1e-18）已经超出了双精度浮点数的精确表示范围，浏览器无法准确解析和计算步进增量，最终导致步进功能失效。

浏览器差异情况 #

不同浏览器对超出精度范围的数值处理逻辑存在差异：

• Firefox：测试中可支持到16位小数的step（1e-16），该值仍在双精度浮点数的精确范围内，因此步进功能正常；超过16位后同样失效。
• Chromium系浏览器（Chrome、Edge等）：对精度阈值的处理更严格，部分版本中16位小数的step也可能出现步进无响应或数值跳转异常的情况。
• Safari：同样受限于浮点数精度，超出有效数字范围后，步进功能完全失效。

可行解决方案 #

要满足ERC20的18位小数需求，推荐两种规避浮点数精度问题的方案：

1. 自定义文本输入框：使用type="text"替代type="number"，通过JavaScript实现自定义的步进按钮逻辑和数值格式校验，完全控制精度。
2. 单位转换处理：将代币数值转换为最小单位（如wei，1 ETH = 1e18 wei），以整数形式存储和处理；显示时再转换回带18位小数的格式。此时数字输入框可使用整数的step="1"和min="1"，避免精度问题。

内容的提问来源于stack exchange，提问作者challet