如何强制光标从numberContainer分组首个输入框开始并禁用后续框点击？

要实现强制从第一个输入框开始输入、禁用后续输入框手动点击的需求，可以通过以下步骤修改代码：

核心思路 #

1. 页面加载后自动聚焦第一个输入框
2. 监听所有输入框的focus事件，当用户尝试聚焦后续未填充的输入框时，自动将焦点切换到第一个未完成的输入框
3. 保留并优化原有的输入完成后自动跳转逻辑

修改后的完整代码 #

JavaScript #

document.addEventListener('DOMContentLoaded', function() {
  const numberContainer = document.querySelector(".numberContainer");
  const inputs = numberContainer.querySelectorAll('input');
  
  // 页面加载完成后，自动聚焦第一个输入框
  inputs[0].focus();

  // 监听输入框聚焦事件，强制按顺序输入
  inputs.forEach((input) => {
    input.addEventListener('focus', function(e) {
      // 找到第一个未填写的输入框
      const firstEmptyInput = Array.from(inputs).find(inp => inp.value.trim().length === 0);
      // 如果当前聚焦的不是第一个未填写的输入框，就切换过去
      if (firstEmptyInput && firstEmptyInput !== this) {
        firstEmptyInput.focus();
        e.preventDefault();
      }
    });
  });

  // 输入完成后自动跳转到下一个输入框的逻辑（优化版）
  numberContainer.addEventListener('keyup', function(e) {
    const target = e.target;
    if (target.tagName.toLowerCase() !== 'input') return;

    // 处理第10个输入框没有maxlength的情况
    const maxLength = target.hasAttribute('maxlength') 
      ? parseInt(target.getAttribute('maxlength'), 10) 
      : Infinity;
    const currentLength = target.value.length;

    if (currentLength >= maxLength) {
      let nextElement = target.nextElementSibling;
      // 查找下一个输入框
      while (nextElement) {
        if (nextElement.tagName.toLowerCase() === 'input') {
          nextElement.focus();
          break;
        }
        nextElement = nextElement.nextElementSibling;
      }
    }
  });
});

HTML（调整自闭合标签，不影响功能） #

<form action="" method="post" enctype="multipart/form-data">
  <div id="numberContainer" name="numberContainer" class="numberContainer">
    1.&nbsp&nbsp&nbsp
    <input type="text" name="input_01" maxlength="1">
    <br><br> 2.&nbsp&nbsp&nbsp
    <input type="text" name="input_02" maxlength="1">
    <br><br> 3.&nbsp&nbsp&nbsp
    <input type="text" name="input_03" maxlength="1">
    <br><br> 4.&nbsp&nbsp&nbsp
    <input type="text" name="input_04" maxlength="1">
    <br><br> 5.&nbsp&nbsp&nbsp
    <input type="text" name="input_05" maxlength="1">
    <br><br> 6.&nbsp&nbsp&nbsp
    <input type="text" name="input_06" maxlength="1">
    <br><br> 7.&nbsp&nbsp&nbsp
    <input type="text" name="input_07" maxlength="1">
    <br><br> 8.&nbsp&nbsp&nbsp
    <input type="text" name="input_08" maxlength="1">
    <br><br> 9.&nbsp&nbsp&nbsp
    <input type="text" name="input_09" maxlength="1">
    <br><br> 10.&nbsp
    <input type="text" name="input_10">
  </div>
</form>

代码说明 #

• 自动聚焦首个输入框：通过DOMContentLoaded事件确保页面元素加载完成后，直接让第一个输入框获得焦点
• 强制顺序输入：监听每个输入框的focus事件，一旦用户点击后续未填写的输入框，自动定位到第一个空输入框，彻底禁用跳步输入的操作
• 优化自动跳转：兼容了第10个输入框无maxlength的情况，同时使用querySelector等更现代的DOM方法，提升代码稳定性

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