去掉 HTML 输入类型中的前导零 type="number"

Question

我有一个带有输入 HTML 的常规输入字段，允许用户输入时间范围（分钟和秒）。从5秒到20分钟。

你可以看一下例子

https://codesandbox.io/s/autumn-cache-mvqnrr

但是，我想更正该字段中的错误。如您所见，该字段允许您在数字前输入任意数量的零。请告诉我如何处理这种情况，以便用户最多可以在字段中输入两个字符？也就是说，该字段将接受来自用户的以下格式的值：00 或 05 或 5 或 10。但不允许 0000 或 00005 或 010。

    const limitValue = (min, max, val) => Math.min(max, Math.max(min, val));

export default function App() {
  const [value, setValue] = useState(10);
  const onInput = useCallback(
    (val, minutes) =>
      setValue((prev) =>
        limitValue(
          5,
          1200,
          minutes ? val * 60 + (prev % 60) : ~~(prev / 60) * 60 + val
        )
      ),
    []
  );
  return (
    <div>
      <span>
        <input
          type="number"
          min={0}
          max={20}
          value={~~(value / 60)}
          onInput={({ target: { value } }) => onInput(+value, true)}
        />
        m
      </span>
      <span>
        <input
          type="number"
          min={-1}
          max={60}
          value={value % 60}
          onInput={({ target: { value } }) => onInput(+value)}
        />
        s
      </span>
    </div>
  );
}

Answer 1

这可能是解决问题的一种糟糕方法（为什么我不知道为什么它会很糟糕）...我所知道的是它有效，而且我没有注意到使用它有任何真正的性能下降。
包装值prop 放在括号中，并在两个值 prop 上调用 .toString() 方法，如下所示

value={(~~(value / 60)).toString()}

和
分别是

value={(value % 60).toString()}

。

这是有效的，因为我们将其更改为字符串值，这会改变 05 和 5 的感知方式，因此必须解析回各自的值...最终使输入重新呈现为您想要的值。