js input框输入1位数字后自动跳到下一个input框聚焦

更新时间:2024/6/2 18:32:58点击: 技术文章

  <script>
      const inputBoxes = document.querySelectorAll('.layui-input');

      inputBoxes.forEach((inputBox, index) => {
          inputBox.addEventListener('input', (e) => {
              const value = e.target.value.trim();
              if (value.length === 1 && !isNaN(Number(value)) && inputBoxes[index + 1]) {
                 
                  inputBoxes[index + 1].focus();
                  e.target.value = value;
                  if (index == 5) {
                      //
                      sz();
                  }
              }
          });
      });
  </script>


html


<div class="word">
    <input class="layui-input" id="Text1" type="text" style="width: 30px" maxlength="1" 1 />
    <input class="layui-input" id="Text2" type="text" style="width: 30px" maxlength="1" />
    <input class="layui-input" id="Text3" type="text" style="width: 30px" maxlength="1" />
    <input class="layui-input" id="Text4" type="text" style="width: 30px" maxlength="1" />
    <input class="layui-input" id="Text5" type="text" style="width: 30px" maxlength="1" />
    <input class="layui-input" id="Text6" type="text" style="width: 30px" maxlength="1" />
    <input class="layui-input" id="Text7" type="text" style="width: 30px;display:none" maxlength="1" />

</div>