type=number输入框step=1e-15时部分场景步进按钮无响应
为什么type="number"输入框调用stepUp()时部分实例不生效?
这是IEEE 754双精度浮点数的精度限制导致的,和输入框本身的位数限制无关。
浏览器处理type="number"输入框的数值时,依赖JavaScript的双精度浮点数存储机制,这种格式的有效十进制精度约为15-17位。具体到你的案例:
- 第二个输入框初始值是
5(整数,可被二进制浮点数精确表示),而step="1e-15"的增量太小,5 + 1e-15的结果在双精度浮点数中会被舍入回5——因为1e-15已经小于5这个数值能表示的最小精度增量,数值没有实际变化,所以stepUp()看起来没生效。 - 第一个输入框初始值是
0,0 + 1e-15可以被精确表示,因此stepUp()能正常递增数值。 - 第三个输入框的
step="1e-14"增量足够大,5 + 1e-14能被双精度浮点数区分开,所以stepUp()也能生效。
你可以直接在控制台验证这个浮点数精度问题:
console.log(5 + 1e-15 === 5); // 输出 true,说明数值未发生变化 console.log(5 + 1e-14 !== 5); // 输出 true,说明数值能被正确区分 console.log(0 + 1e-15 !== 0); // 输出 true,说明数值能被正确区分
本质上,当step的增量小于当前数值的最小可表示精度时,stepUp()操作不会产生可见的数值变化,这是浮点数存储的固有局限,而非输入框的功能限制。
内容的提问来源于stack exchange,提问作者ScienceKitten
相关产品推荐
相关产品推荐

