React组件中数字输入框maxLength属性失效，如何限制输入不超过4位？

<input type="number"/> 原生不支持maxLength属性，这是因为该类型输入框的内部逻辑是基于数值而非字符长度处理的。下面提供几种实用的解决方法：

方法一：实时输入截断（推荐） #

利用onInput事件实时处理输入内容，过滤非数字字符并截断到4位，确保用户输入时立刻生效：

import { useState } from 'react';

function LimitedNumberInput() {
  const [inputValue, setInputValue] = useState('');

  const handleInput = (e) => {
    // 过滤非数字字符，同时截断到最多4位
    const processedValue = e.target.value.replace(/[^0-9]/g, '').slice(0, 4);
    setInputValue(processedValue);
  };

  return (
    <input
      type="number"
      value={inputValue}
      onInput={handleInput}
      onChange={(e) => {
        // 这里可以保留你原有的业务逻辑，比如同步值到父组件或状态
        console.log('最终输入值:', e.target.value);
      }}
    />
  );
}

该方法能精准控制字符长度，同时保留数字输入框的原生特性（比如上下箭头调整数值）。如果需要支持负数，只需调整正则为/[^0-9-]/g，并注意负数的字符长度（负号+3位数字，总长度4）。

方法二：结合max属性（仅适用于正整数场景） #

如果你的输入范围是0-9999的正整数，可以直接设置max="9999"，同时配合onInput防止用户手动输入超过最大值的内容：

<input
  type="number"
  max="9999"
  onInput={(e) => {
    const numValue = parseInt(e.target.value);
    if (!isNaN(numValue) && numValue > 9999) {
      e.target.value = '9999';
    }
  }}
/>

注意：此方法无法处理0开头的数字（比如输入0012会被自动转换为12），也不支持小数或负数，仅适用于特定场景。

方法三：改用文本输入框模拟数字输入 #

如果不需要数字输入框的上下箭头特性，可以换成type="text"，配合inputMode="numeric"让移动端弹出数字键盘，同时直接使用maxLength限制长度：

<input
  type="text"
  inputMode="numeric"
  maxLength="4"
  pattern="[0-9]*"
  onChange={handleChange}
/>

pattern="[0-9]*"会限制只能输入数字，inputMode="numeric"保证移动端的输入体验，maxLength可以直接生效，是最简单的替代方案。

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