如何重置函数外声明、函数内迭代的变量I？表单箭头键导航异常

核心问题是全局索引变量i没有根据当前所在列动态重置，导致跨列后导航位置混乱。解决思路是给每一列单独维护导航索引，同时监听焦点切换更新对应索引：

1. 拆分索引变量：为每个列（prev和curr）分别设置独立的索引，避免跨列干扰
2. 实时识别当前列：按键时先判断焦点所在的列，调用对应列的索引和输入框数组
3. 同步焦点位置：监听输入框的焦点事件，更新对应列的索引为当前焦点元素的位置

修改后的完整代码：

<div class="prev">
  <input type="text" placeholder="prev 1">
  <input type="text" placeholder="prev 2">
  <input type="text" placeholder="prev 3">
</div>
<div class="curr">
  <input type="text" placeholder="curr 1">
  <input type="text" placeholder="curr 2">
  <input type="text" placeholder="curr 3">
</div>

// 为每个列维护独立的导航索引
const columnIndexes = {
  prev: 0,
  curr: 0
};
// 获取各列的输入框数组
const prevInputs = document.querySelectorAll('.prev input');
const currInputs = document.querySelectorAll('.curr input');

// 键盘导航逻辑
document.addEventListener('keydown', (e) => {
  // 确定当前焦点所在的列
  const activeColumnEl = document.activeElement.closest('.prev, .curr');
  if (!activeColumnEl) return;
  
  const currentColumn = activeColumnEl.classList.contains('prev') ? 'prev' : 'curr';
  const currentInputs = currentColumn === 'prev' ? prevInputs : currInputs;
  let currentIndex = columnIndexes[currentColumn];

  if (e.key === 'ArrowDown') {
    e.preventDefault();
    // 循环向下导航，超出最后一个则回到第一个
    currentIndex = (currentIndex + 1) % currentInputs.length;
    currentInputs[currentIndex].focus();
    columnIndexes[currentColumn] = currentIndex;
  } else if (e.key === 'ArrowUp') {
    e.preventDefault();
    // 循环向上导航，超出第一个则回到最后一个
    currentIndex = (currentIndex - 1 + currentInputs.length) % currentInputs.length;
    currentInputs[currentIndex].focus();
    columnIndexes[currentColumn] = currentIndex;
  }
});

// 监听焦点切换，同步对应列的索引
document.querySelectorAll('.prev input, .curr input').forEach(input => {
  input.addEventListener('focus', () => {
    const column = input.closest('.prev, .curr').classList.contains('prev') ? 'prev' : 'curr';
    const inputs = column === 'prev' ? prevInputs : currInputs;
    // 更新当前列的索引为焦点元素在数组中的位置
    columnIndexes[column] = Array.from(inputs).indexOf(input);
  });
});

这样修改后，切换到任意一列时，该列的导航索引会自动同步到当前焦点位置，按上下箭头时会从当前位置（或列顶部，若首次进入）开始正常导航，不会出现跳过输入框的问题。

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