时间戳

首页 > 解决方案 > 使用大于“Number.MAX_SAFE_INTEGER”（9007199254740992）的数字模拟输入 type="number"？

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

问题描述

我试图模仿<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

解决方案

简单地使用 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>

如果您担心过时的浏览器，您可以使用复制 BigInt的替代实现。

推荐阅读