如何限制Ant Design InputNumber的输入长度？

问题原因 #

• InputNumber组件本身不支持maxLength属性，该属性仅适用于原生input[type="text"]，因此设置后不会生效。
• max属性是限制数值的最大值，而非输入的字符长度。比如设置max={999999999999}，只是限制输入数值不能超过12位数字的最大值，但用户仍可输入超过12位的字符，最终值会被强制修正为最大值，并非真正限制输入长度。

解决方案 #

要精准限制输入的字符长度为12位，可通过onChange或onInput事件手动处理输入内容，结合受控组件特性截断过长输入：

修改后的代码示例

<InputNumber
  required
  type="number"
  addonBefore="+"
  defaultValue={994}
  controls={false}
  value={combinedState?.phoneNumber}
  onChange={(value) => {
    if (value) {
      const strVal = value.toString();
      // 限制输入长度不超过12位
      if (strVal.length > 12) {
        const limitedVal = parseInt(strVal.slice(0, 12), 10);
        setCombinedState(prevState => ({
          ...prevState,
          phoneNumber: limitedVal
        }));
        return;
      }
    }
    setCombinedState(prevState => ({
      ...prevState,
      phoneNumber: value
    }));
  }}
  onKeyDown={(event) => {
    if (['e', '+', '-', '.'].includes(event.key)) {
      event.preventDefault();
    }
  }}
  min={0}
/>

实时输入限制优化

如果需要输入到第12位后直接禁止继续输入，可改用onInput事件操作输入框值：

onInput={(event) => {
  const inputVal = event.target.value;
  if (inputVal.length > 12) {
    event.target.value = inputVal.slice(0, 12);
    // 同步更新state，保证受控组件值一致
    setCombinedState(prevState => ({
      ...prevState,
      phoneNumber: parseInt(inputVal.slice(0, 12), 10)
    }));
  }
}}

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