React中如何限制type='number'输入框仅输入0-999且小数位最多三位

现有实现的核心问题 #

• 拿到输入值第一时间转换为Number类型，会丢失输入中间态（比如尚未完成输入的小数点、前导0），导致光标跳变、小数点被自动吞掉
• 未对小数点后的数字长度做硬拦截，因此允许用户无限输入小数位，出现0.1234567这类不符合要求的输入
• 数值超过999时采用除以10的截断逻辑，会出现输入跳变，用户输入超范围数值时没有明确的拦截反馈，体验较差

可直接落地的实现代码 #

<input
  type="number"
  value={value}
  step="0.001"
  onChange={(e) => {
    const inputRaw = e.target.value;
    // 空值直接放行
    if (!inputRaw) {
      onChange('');
      return;
    }
    // 正则校验结构：整数部分最多3位，小数点后最多3位，仅允许一个小数点
    const validRule = /^\d{0,3}(\.\d{0,3})?$/;
    // 不符合格式的输入直接拦截，不更新组件状态
    if (!validRule.test(inputRaw)) return;
    // 整数部分数值不能超过999
    if (Number(inputRaw) > 999) return;
    // 所有校验通过后再更新状态
    onChange(inputRaw);
  }}
/>

方案效果说明 #

• 严格匹配输入规则：整数范围锁定0-999，带小数点的数值最多允许3位小数，手动敲入第4位小数、第4位整数时会被直接拦截，不会写入组件状态
• 完全保留type="number"的原生能力：支持唤起移动端数字键盘、保留输入框右侧的上下调节箭头交互，未违反必须使用number类型的要求
• 兼容正常输入中间态：比如输入到0.1、99这类未完成的输入状态不会被强制清空，不会打断连续输入流程
• 解决了原有逻辑的跳变问题：用户输入超范围数值时直接拦截，不会出现“输入1000直接跳变为100”的光标错位问题

补充说明：原生max="999"属性仅在表单提交、点击输入框上下调节箭头时触发校验，手动输入过程中不会拦截超范围数值，因此无法满足实时校验的需求。

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