使用jQuery为number类型输入框设值失效：值长度超15位问题

这个坑我之前也踩过！核心原因是JavaScript的数字精度限制：JS采用IEEE 754双精度浮点数标准，只能精确表示-2^53到253之间的整数，换算成十进制大概是16位左右的数字。你传入的11111111111111444444444888888888远超过这个范围，JS会自动把它转成不精确的浮点数，导致最终设置到输入框里的值和你预期的不一样。

快速解决方案 #

把要设置的数值以字符串形式传递给val()方法，这样就能完整保留所有数字字符，不会丢失精度：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    // 用引号包裹数字，以字符串形式传递
    $("#user").val("11111111111111444444444888888888");
  });
});
</script>
</head>
<body>
<p>Number: <input type="number" id="user"></p>
<button>设置超长数字</button>
</body>
</html>

额外说明 #

• type="number"的输入框本身是支持接收超长数字字符串的（只要内容符合数字格式），只是JS原生的数字类型存不下这么大的值而已。
• 如果之后需要对这个超长数字进行计算操作，别直接用JS的普通数字类型，建议使用ES6的BigInt（比如BigInt("11111111111111444444444888888888")），或者专门的大整数处理库来避免精度丢失。

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