使用querySelector实现maxLength触发跳转下一个输入框时出现无效选择器错误

DevOps 小满

2026-10-2

问题原因

querySelector的属性选择器语法不符合规范：匹配元素属性的CSS选择器需要用[]包裹，你直接写name=2不属于合法选择器，因此触发报错。
第一个输入框（month字段）未配置name属性，触发onChange时e.target.name会返回空值，转为整数后为NaN，会导致后续跳转逻辑失效。

修复步骤

补全所有输入框的name属性，你现有3个输入框分别对应name="1"、name="2"、name="3"即可，示例如下：

<Input
  onChange={dateChange("month")}
  value={date.month}
  id="1"
  name="1" // 新增该属性
  maxLength={2}
  type="number"
/>
<span className="sep">/</span>
<Input
  onChange={dateChange("day")}
  value={date.day}
  name="2"
  id="2"
  maxLength={2}
  type="number"
/>

修正dateChange函数中的选择器写法，两种可选方案：

按name属性匹配：将选择器改为[name="${fieldIntIndex + 1}"]
按id匹配（你已经给元素配置了id，这种写法更简洁）：选择器写为#${fieldIntIndex + 1}

修正后的dateChange对应逻辑代码：

if (value.length === e.target.maxLength) {
  if (fieldIntIndex < 3) {
    // 选其中一种写法即可
    // 方案1：按name匹配
    const nextfield = document.querySelector(`[name="${fieldIntIndex + 1}"]`);
    // 方案2：按id匹配
    // const nextfield = document.querySelector(`#${fieldIntIndex + 1}`);
    console.log(nextfield);
    if (nextfield !== null) {
      nextfield.focus();
    }
  }
}