如何在输入两位数字后自动聚焦下一个可用输入框（适配tabindex与禁用字段）

要实现两位数字输入后自动聚焦到下一个可用输入框，需要做以下几处核心修改：

关键调整点 #

• 将所有输入框的 maxlength 属性从 1 改为 2，允许输入两位数字。
• 在输入事件触发函数中添加判断：仅当输入内容长度达到 maxlength 时，才执行聚焦下一个输入框的逻辑。
• 修正属性名拼写错误：tabeindex → tabindex（标准HTML属性名，避免潜在兼容问题）。

修改后的完整代码 #

JavaScript #

const inputs = document.querySelectorAll('input:not([disabled])');
let maxTries = 100;

// 重构为返回目标元素，避免全局变量污染
const getNextElement = (tabindex) => {
  let counter = 0;
  const findNext = (currentIndex) => {
    if (counter >= maxTries) return null;
    const element = document.querySelector(`[tabindex="${currentIndex + 1}"]`);
    if (element && !element.disabled) {
      return element;
    }
    counter++;
    return findNext(currentIndex + 1);
  };
  return findNext(tabindex);
};

function focusNextElement(input) {
  // 仅当输入内容填满时才触发聚焦
  if (input.value.length !== parseInt(input.getAttribute('maxlength'), 10)) {
    return;
  }
  const currentTabindex = parseInt(input.getAttribute('tabindex'), 10);
  const nextElement = getNextElement(currentTabindex);
  if (nextElement) {
    nextElement.focus();
  }
}

HTML #

<table>
<thead></thead>
<tbody>
<tr>
 <td> 1<input type="text" maxlength="2" oninput="focusNextElement(this)" id="a" name="a" tabindex="1"></td>
 <td>3<input type="text" maxlength="2" oninput="focusNextElement(this)" id="b" name="b" tabindex="3" disabled></td>
 <td>5<input type="text" maxlength="2" oninput="focusNextElement(this)" id="c" name="c" tabindex="5">
</td></tr>
<tr>
 <td>2 <input type="text" maxlength="2" oninput="focusNextElement(this)" id="d" name="d" tabindex="2"></td>
 <td>4<input type="text" maxlength="2" oninput="focusNextElement(this)" id="e" name="e" tabindex="4"></td>
 <td>6<input type="text" maxlength="2" oninput="focusNextElement(this)" id="f" name="f" tabindex="6"></td>
</tr>
</tbody>
</table>

额外优化说明 #

• 移除了全局状态变量，改用递归内部的局部变量，避免多输入场景下的逻辑冲突。
• 动态读取 maxlength 属性值，后续修改输入位数无需调整JS逻辑。
• 明确使用 parseInt 转换属性值为数字，避免字符串比较导致的错误。

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