使用大于“Number.MAX_SAFE_INTEGER”（9007199254740992）的数字模拟输入 type="number"？答案

【问题标题】：Emulate input type="number" with numbers bigger than `Number.MAX_SAFE_INTEGER` (9007199254740992)?使用大于“Number.MAX_SAFE_INTEGER”（9007199254740992）的数字模拟输入 type="number"？
【发布时间】：2021-05-19 02:21:07
【问题描述】：

我正在尝试模仿 <input type="text"> 以表现得像 <input type="number">（向上/向下箭头键增加/减少值）

到目前为止它工作正常，除非值达到Number.MAX_SAFE_INTEGER (9007199254740992) 它停止增加，但type="number" 可以超过该数字。有没有办法可以绕过javascript中的这个限制？

const input = document.querySelector('input[type="text"]'),
      step = {ArrowUp: 1, ArrowDown: -1};

input.addEventListener("keydown", (e) =>
{
  if (step[e.key])
  {
    input.value = Number(input.value) + step[e.key];
    return e.preventDefault();
  }
});

<table>
  <tr>
    <td>type="text"</td>
    <td><input type="text" value="9007199254740990"></td>
    <td>use UP/DOWN arrow keys</td>
  </tr>
  <tr>
    <td>type="number"</td>
    <td><input type="number" value="9007199254740990"></td>
  </tr>
</table>

根据@CertainPerformance 答案BigInt() 似乎是一个很好的解决方法，但是它不允许使用浮点数。此外，如果 step 设置为例如 1.4，则使用浮点数，它会显示一些奇怪的数字，例如 4.199999999999999

【问题讨论】：

标签： javascript

【解决方案1】：

只需使用 BigInt 表示法就可以解决问题：

const input = document.querySelector('input[type="text"]'),
      step = {ArrowUp: 1n, ArrowDown: -1n};

input.addEventListener("keydown", (e) =>
{
  if (step[e.key])
  {
    input.value = BigInt(input.value) + step[e.key];
    return e.preventDefault();
  }
});

<table>
  <tr>
    <td>type="text"</td>
    <td><input type="text" value="9007199254740990"></td>
    <td>use UP/DOWN arrow keys</td>
  </tr>
  <tr>
    <td>type="number"</td>
    <td><input type="number" value="9007199254740990"></td>
  </tr>
</table>

如果您担心过时的浏览器，可以使用 alternative implementation 复制 BigInt。

【讨论】：

谢谢！它甚至比本机 type="number" 输入更好......无论出于何种原因，当我尝试它之前它给我错误Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions。奇怪的是，您的示例运行良好...
您可能错过了将 ArrowUp: 1 更改为 ArrowUp: 1n 等 - 这将允许 + step[e.key] 工作。
是的，是的，我使用的是常规数字。
嗯这个方法不支持浮点数...
是的，它是 BigInt，而不是 BigDecimal。如果您想要大小数，请考虑：stackoverflow.com/questions/16742578/bigdecimal-in-javascript