解决HTML number输入框前导零问题并限制最多两位字符

针对输入框允许任意前导零、字符长度不受限的问题，我们可以通过输入过滤+格式校验直接处理非法内容，确保输入符合00、05、5、10这类要求。以下是修改后的完整代码：

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

// 通用输入处理函数：过滤非法字符、限制长度、去除多余前导零
const processInput = (inputStr, min, max) => {
  // 只保留数字字符
  let filtered = inputStr.replace(/[^0-9]/g, '');
  // 最多允许两位字符
  if (filtered.length > 2) {
    filtered = filtered.slice(0, 2);
  }
  // 去除多余前导零：仅保留"00"合法格式，其他如"01"转为"1"
  if (filtered.length > 1 && filtered.startsWith('0') && filtered !== '00') {
    filtered = filtered.replace(/^0+/, '') || '0';
  }
  // 转换为数字并限制范围
  const num = parseInt(filtered, 10) || 0;
  return Math.min(max, Math.max(min, num));
};

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="text"
          inputMode="numeric" // 保留数字键盘输入体验
          value={String(~~(value / 60))}
          onInput={({ target: { value } }) => {
            const processedNum = processInput(value, 0, 20);
            onInput(processedNum, true);
          }}
        />
        m
      </span>
      <span>
        <input
          type="text"
          inputMode="numeric"
          value={String(value % 60)}
          onInput={({ target: { value } }) => {
            const processedNum = processInput(value, 0, 59);
            onInput(processedNum);
          }}
        />
        s
      </span>
    </div>
  );
}

关键修改说明 #

• 替换输入类型：放弃原生type="number"（无法有效限制前导零和长度），改用text配合inputMode="numeric"，既保证数字键盘输入，又能完全控制输入内容。
• 输入过滤逻辑：
  • 过滤非数字字符，确保只能输入数字；
  • 截断超过两位的输入，限制字符长度；
  • 自动去除多余前导零：01转为1、0005转为5，仅保留00这种合法格式；
  • 最终将输入值限制在对应范围（分钟0-20，秒0-59）。
• 总时间范围保留：原有的limitValue函数继续生效，确保总时间始终在5秒到20分钟（1200秒）之间。

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