三段式日期输入补前导0后无法清0且maxLength失效出现3位值问题求助

问题根因 #

• type="number"类型的输入框不支持maxLength属性，该属性仅对type="text"/tel等文本类型输入生效，这是输入内容超过2位的核心原因之一。
• 补0时机错误，在输入单字符时立即补0会打断用户正常输入流程：比如用户要输入12，输入1后自动补为01，后续输入2就会变成012，即使限制了长度也会出现逻辑冲突。
• 当前onChange的分支逻辑存在遗漏，没有统一处理输入值的清洗、截断，长输入场景直接存储未处理的内容。

修复方案 #

1. 修改输入框属性 #

把type="number"替换为type="tel"，既可以保留移动端数字键盘唤起的能力，也能让maxLength正常生效，同时去掉不必要的数字输入上下箭头：

<div className="nh-date">
  <Input
    onChange={onDateInputChange("month")}
    onBlur={onDateInputBlur("month")} // 新增失焦事件处理补0
    value={date.month}
    className={`nh-mon ${error.includes("month") ? "error" : ""}`}
    name="month"
    id="mon"
    placeholder="00"
    maxLength={2}
    type="tel" // 替换原number类型
    selectTextOnFocus={true}
  />
  <span className="sep">/</span>
  {/* 日、年输入框同理修改type属性，年输入框可以把maxLength设为2对应YY格式 */}
...

2. 重写输入和校验逻辑 #

将补0逻辑从onChange移到onBlur中，避免打断用户输入，同时统一做输入内容清洗和校验：

// 输入时仅做内容清洗和校验
const onDateInputChange = (field: string) => (e: any) => {
  let inputVal = e.target.value.replace(/\D/g, ''); // 先过滤所有非数字字符
  // 截断到最大长度：月/日/两位年最多2位
  const maxLen = 2;
  inputVal = inputVal.slice(0, maxLen);

  // 实时更新输入值，不补0
  setInputDate(prev => ({ ...prev, [field]: inputVal }));

  // 实时校验
  let newError = [...error];
  if (inputVal.length === 0) {
    if (!newError.includes(field)) newError.push(field);
  } else {
    const numVal = parseInt(inputVal, 10);
    if (
      (field === 'month' && (numVal < 1 || numVal > 12)) ||
      (field === 'day' && (numVal < 1 || numVal > 31))
    ) {
      if (!newError.includes(field)) newError.push(field);
    } else {
      newError = newError.filter(item => item !== field);
    }
  }
  setError(newError);
};

// 失焦时统一处理补0逻辑
const onDateInputBlur = (field: string) => () => {
  const currentVal = inputDate[field];
  if (currentVal.length === 1 && (field === 'month' || field === 'day')) {
    // 单字符补前导0
    setInputDate(prev => ({ ...prev, [field]: currentVal.padStart(2, '0') }));
  }
};

3. 可选优化 #

如果一定要在输入过程中补0，可以在用户输入完第二位后触发补0，同时需要处理光标位置避免输入错位，但失焦补0是目前用户体验最好、逻辑最稳定的方案。

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