如何在输入指定字符数后触发keyup事件实现分段手机号输入自动跳转

云上老周

2026-10-1

问题原因

1. 输入1位就自动跳转

你现有代码的非退格分支没有判断当前输入框的内容长度是否达到了对应maxlength阈值，只要存在下一个输入框就直接触发跳转，所以每次输入字符后都会直接跳到下一个输入框。

2. 最后一个输入框退格报错

退格逻辑中通过parentElement.children下标查找前序输入框的逻辑和实际DOM结构不匹配，step为3时计算得到的下标对应的节点不是输入框容器，调用children[0]时会抛出找不到元素的异常。且你已经通过id提前获取到了前一个输入框元素，不需要冗余的DOM层级遍历操作。

修复方案

修改后的nextStep方法如下：

// 预先定义每个输入框对应的最大长度
private readonly maxLengthCfg = {
  1: 3,
  2: 3,
  3: 4
}

nextStep(event, step: number): void {
  const prevElement = document.getElementById('code' + (step - 1));
  const nextElement = document.getElementById('code' + (step + 1));
  const currentValue = event.target.value.trim();

  // 处理退格跳转逻辑
  if (event.code === 'Backspace' && currentValue === '') {
    if (prevElement) {
      prevElement.value = '';
      prevElement.focus();
    }
    return;
  }

  // 只有当前输入长度达到最大值时才跳转到下一个输入框
  if (nextElement && currentValue.length === this.maxLengthCfg[step]) {
    nextElement.focus();
  }
}