如何实现输入框满足条件时变色、仅允许输入数字且自动跳转下一个输入框

实现满足以下三个条件的输入框组：

1. 已输入内容的输入框自动修改背景色
2. 输入框仅允许输入数字
3. 单个输入框输入完成后自动跳转至下一个输入框

效果示例：

提交的代码存在以下可优化/修复点：

• 多个输入框使用重复id="input"，违反DOM id唯一的规范
• 跳转逻辑未做边界校验：最后一个输入框输入后会尝试访问不存在的第7个输入框触发报错，第一个输入框删除内容时会尝试访问不存在的下标为负的输入框触发报错
• 输入后的文字颜色和背景色设置为同色，会导致输入的数字不可见

HTML #

<form action="" class="mt-4">
  <input class="otp" type="text" oninput='digitValidate(this)' onkeyup='tabChange(1)' maxlength=1>
  <input class="otp" type="text" oninput='digitValidate(this)' onkeyup='tabChange(2)' maxlength=1>
  <input class="otp" type="text" oninput='digitValidate(this)' onkeyup='tabChange(3)' maxlength=1>
  <input class="otp" type="text" oninput='digitValidate(this)' onkeyup='tabChange(4)' maxlength=1>
  <input class="otp" type="text" oninput='digitValidate(this)' onkeyup='tabChange(5)' maxlength=1>
  <input class="otp" type="text" oninput='digitValidate(this)' onkeyup='tabChange(6)' maxlength=1>
</form>

CSS #

form input {
  display: inline-block;
  width: 50px;
  height: 50px;
  text-align: center;
}

.otp {
  border-radius: 5px;
  border: 2px solid #005E6A;
  outline: none;
  font-size: 24px;
}

JS #

let digitValidate = function (ele) {
  // 先过滤非数字字符
  ele.value = ele.value.replace(/[^0-9]/g, '');
  // 根据是否有值设置样式
  if (ele.value !== '') {
    ele.style.backgroundColor = "#0f6a19";
    ele.style.color = "#ffffff"; // 文字改为白色可见
  } else {
    ele.style.backgroundColor = "#FFFFFF";
    ele.style.color = "#005E6A";
  }
}

let tabChange = function (val) {
  let inputs = document.querySelectorAll('.otp');
  const total = inputs.length;
  // 输入完成且不是最后一个，跳转到下一个
  if (inputs[val - 1].value !== '' && val < total) {
    inputs[val].focus();
  }
  // 内容清空且不是第一个，跳转到上一个
  else if (inputs[val - 1].value === '' && val > 1) {
    inputs[val - 2].focus();
  }
}

• 输入非数字内容会被自动过滤，仅保留0-9的字符
• 输入框有内容时自动变为绿色背景白色文字，清空后恢复默认样式
• 每输入1位数字自动跳到下一个输入框，删除当前输入框内容自动跳回上一个，首尾输入框不会出现跳转异常

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