网页表单元素键盘导航：解决索引重置问题

<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" 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" 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>
</table>

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 < 5) { // 假设有6个元素，索引0-5
    I++;
    isFocus[I].focus();
  } else if (key === 'ArrowUp' && I > 0) {
    I--;
    isFocus[I].focus();
  }
}

// 遍历所有需要特殊键盘导航行为的类名
['prev', 'curr'].forEach(selector => {
  // 1. 获取当前选择器对应的所有输入框元素
  const inputs = [...document.querySelectorAll(`.${selector}`)];

  // 2. 为当前组（selector）维护一个局部索引变量
  // 注意：这里使用let，因为它会在每次forEach迭代时创建一个新的作用域，
  // 从而为每个selector提供一个独立的index变量（闭包特性）
  let index = 0; 

  // 3. 初始设置焦点（可选，根据需求）
  // inputs[index].focus(); 

  // 4. 定义键盘按下事件处理函数
  function onkeydown(event) {
    const key = event.key;

    // 仅当当前焦点在属于此组的元素上时才处理
    if (document.activeElement.classList.contains(selector)) {
        if (key === 'ArrowDown') {
            index = Math.min(index + 1, inputs.length - 1); // 确保不超过最大索引
        } else if (key === 'ArrowUp') {
            index = Math.max(index - 1, 0); // 确保不小于最小索引
        }
        // 阻止默认滚动行为，如果需要
        if (key === 'ArrowDown' || key === 'ArrowUp') {
            event.preventDefault(); 
        }
        inputs[index].focus(); // 移动焦点到新的索引位置
    }
  }

  // 5. 定义焦点获取事件处理函数
  function onfocus(event) {
    // 当此组中的任何一个元素获得焦点时，更新其对应的索引
    index = inputs.indexOf(event.target);
  }

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