按tabindex自动聚焦下一个可用输入框：输入后光标不移动问题排查

核心问题分析 #

1. 函数依赖form容器，但输入字段未包裹在form内
   原函数中的if (document.activeElement && document.activeElement.form)判断直接不成立，导致后续跳转逻辑完全不执行——你的输入字段都在table里，没有form父元素，这是最关键的失效原因。

2. HTML属性拼写错误
   所有输入字段的tabeindex都是拼写错误，正确属性名是tabindex，浏览器无法识别错误属性，自然无法按设定的tab顺序处理元素。

3. HTML语法错误
   最后一个输入字段f的tabindex属性后多了一个多余引号，会导致浏览器解析异常，影响元素的正常识别。

修复后的代码实现 #

修正后的HTML结构

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

优化后的跳转函数

function focusNextElement () {
  // 定义可聚焦元素的选择器，排除禁用状态的元素
  const focussableSelector = 'a:not([disabled]), button:not([disabled]), input[type=text]:not([disabled]), [tabindex]:not([disabled]):not([tabindex="-1"])';
  const activeElement = document.activeElement;

  if (!activeElement) return;

  // 获取所有符合条件的可聚焦元素，过滤不可见元素（保留当前激活元素）
  let focussable = Array.from(document.querySelectorAll(focussableSelector)).filter(element => {
    return element.offsetWidth > 0 || element.offsetHeight > 0 || element === activeElement;
  });

  // 按tabindex数值排序，确保跳转顺序符合设定的tab顺序
  focussable.sort((elA, elB) => {
    const tabA = parseInt(elA.getAttribute('tabindex')) || 0;
    const tabB = parseInt(elB.getAttribute('tabindex')) || 0;
    return tabA - tabB;
  });

  const currentIndex = focussable.indexOf(activeElement);
  if (currentIndex === -1) return;

  // 查找下一个可用元素
  let nextIndex = currentIndex + 1;
  while (nextIndex < focussable.length) {
    const nextEl = focussable[nextIndex];
    if (!nextEl.disabled && (nextEl.offsetWidth > 0 || nextEl.offsetHeight > 0)) {
      nextEl.focus();
      return;
    }
    nextIndex++;
  }

  // 如果末尾没有可用元素，回到开头查找
  for (let i = 0; i < currentIndex; i++) {
    const firstEl = focussable[i];
    if (!firstEl.disabled && (firstEl.offsetWidth > 0 || firstEl.offsetHeight > 0)) {
      firstEl.focus();
      return;
    }
  }
}

关键优化点 #

• 移除了对form容器的依赖，改为从整个文档获取可聚焦元素，适配无form的页面结构。
• 增加了tabindex排序逻辑，确保跳转顺序严格遵循设定的tab值，而非DOM渲染顺序。
• 完善了循环查找逻辑，确保跳过禁用、不可见的元素，找到真正可用的下一个输入框。

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