实现网页元素键盘导航中索引状态的正确管理

var isFocus;
var I = 0; // 全局索引变量

const prev = document.getElementsByClassName('prev');
const curr = document.getElementsByClassName('curr');

prev[0].focus(); // 初始聚焦

document.addEventListener('keydown', fX);

function fX(event) {
  const key = event.key;

  // 判断当前聚焦元素属于哪一类
  const isFocused1 = document.activeElement.classList.contains("prev");
  const isFocused2 = document.activeElement.classList.contains("curr");

  if (isFocused1) {
    isFocus = prev;
  } else if (isFocused2) {
    isFocus = curr;
  }

  if (key === 'ArrowDown' && I < isFocus.length - 1) { // 注意这里原始代码是 I < 5
    I++;
    isFocus[I].focus();
    event.preventDefault(); // 阻止默认滚动行为
  } else if (key === 'ArrowUp' && I > 0) {
    I--;
    isFocus[I].focus();
    event.preventDefault(); // 阻止默认滚动行为
  }
}

<p>尝试选择第一列的顶部输入框，向下点击3次到达第四个，然后点击第二列的第一个输入框。现在点击向下一次，你会发现光标跳到了第五个框。</p>
<table>
  <tr>
    <td><input type="text" class="prev"></td>
    <td><input type="text" class="curr"></td>
    <td><p class="mtr-Result"></p></td>
  </tr>
  <!-- 更多行，结构类似 -->
  <tr>
    <td><input type="text" class="prev"></td>
    <td><input type="text" class="curr"></td>
    <td><p class="mtr-Result"></p></td>
  </tr>
</table>

<p>尝试选择第一列的顶部输入框，向下点击3次到达第四个，然后点击第二列的第一个输入框。</p>
<table>
  <tr>
    <td><input type="text" name="" class="prev"></td>
    <td><input type="text" name="" class="curr"></td>
    <td>
      <p class="mtr-Result"></p>
    </td>
  </tr>

  <tr>
    <td><input type="text" name="" class="prev"></td>
    <td><input type="text" name="" class="curr"></td>
    <td>
      <p class="mtr-Result"></p>
    </td>
  </tr>

  <tr>
    <td><input type="text" name="" class="prev"></td>
    <td><input type="text" class="curr"></td>
    <td>
      <p class="mtr-Result"></p>
    </td>
  </tr>

  <tr>
    <td><input type="text" name="" class="prev"></td>
    <td><input type="text" class="curr"></td>
    <td>
      <p class="mtr-Result"></p>
    </td>
  </tr>
  <tr>
    <td><input type="text" name="" class="prev"></td>
    <td><input type="text" class="curr"></td>
    <td>
      <p class="mtr-Result"></p>
    </td>
  </tr>
  <tr>
    <td><input type="text" name="" class="prev"></td>
    <td><input type="text" class="curr"></td>
    <td>
      <p class="mtr-Result"></p>
    </td>
    </tr>
</table>

// 定义所有需要独立导航的元素组的类名
['prev', 'curr'].forEach(selector => {
  // selector 将依次是 'prev' 和 'curr'

  // 1. 选取当前组的所有输入框元素
  // 使用 querySelectorAll 获取 NodeList，然后用扩展运算符转换为数组，方便后续操作
  const inputs = [...document.querySelectorAll(`.${selector}`)];
  let index = 0; // 为当前组初始化一个独立的局部索引变量

  // 初始聚焦第一个元素（可选，根据需求调整）
  if (inputs.length > 0) {
    inputs[index].focus();
  }

  // 2. 定义键盘按下事件处理函数
  // 当用户在当前组的任一输入框中按下方向键时触发
  function onkeydown(event) {
    const key = event.key;

    // 根据方向键调整索引
    if (key === 'ArrowDown' && index < inputs.length - 1) { // 确保不超过数组边界
      index++;
      event.preventDefault(); // 阻止页面默认滚动行为
    } else if (key === 'ArrowUp' && index > 0) { // 确保不小于0
      index--;
      event.preventDefault(); // 阻止页面默认滚动行为
    } else {
      // 如果不是上下箭头键，或者已经到达边界，则不处理
      return;
    }

    // 将焦点移动到新的索引位置
    inputs[index].focus();
  }

  // 3. 定义焦点获得事件处理函数
  // 当当前组的任一输入框获得焦点时触发（无论是通过点击、Tab 键还是其他方式）
  function onfocus(event) {
    // 找到当前获得焦点的元素在 'inputs' 数组中的索引
    // 这确保了无论用户如何切换焦点，`index` 变量始终与当前聚焦的元素同步
    index = inputs.indexOf(event.target);
  }

  // 4. 为当前组的每个输入框添加事件监听器
  inputs.forEach(input => {
    input.addEventListener('keydown', onkeydown); // 监听键盘导航
    input.addEventListener('focus', onfocus);     // 监听焦点变化以更新索引
  });
});