JavaScript中实现基于类名分组的表单元素焦点管理与方向键导航

var I = 0; // 全局索引
const prev = document.getElementsByClassName('prev');
const curr = document.getElementsByClassName('curr');

document.addEventListener('keydown', function fX(event) {
  const key = event.key;
  let isFocusGroup; // 当前焦点所在的元素组

  if (document.activeElement.classList.contains("prev")) {
    isFocusGroup = prev;
  } else if (document.activeElement.classList.contains("curr")) {
    isFocusGroup = curr;
  }

  if (isFocusGroup) {
    if (key === 'ArrowDown' && I < isFocusGroup.length - 1) {
      I++;
      isFocusGroup[I].focus();
    } else if (key === 'ArrowUp' && I > 0) {
      I--;
      isFocusGroup[I].focus();
    }
  }
});

// 遍历所有需要进行键盘导航的元素组的类名
['prev', 'curr'].forEach(selector => {
  // selector 是当前处理的类名，例如 'prev' 或 'curr'

  // 选中所有具有当前类名的输入框，并转换为数组
  const inputs = [...document.querySelectorAll(`.${selector}`)];
  // 为当前组初始化一个局部索引变量
  let index = 0;

  // 初始时，将焦点设置到当前组的第一个元素（如果存在）
  if (inputs.length > 0) {
    inputs[index].focus();
  }

  /**
   * 处理键盘按下事件的函数。
   * 当用户按下上下方向键时，根据当前组的索引移动焦点。
   * @param {KeyboardEvent} event 键盘事件对象
   */
  function onkeydown(event) {
    const key = event.key;

    // 检查是否是上下方向键，并确保索引在有效范围内
    if (key === 'ArrowDown' && index < inputs.length - 1) {
      index++;
    } else if (key === 'ArrowUp' && index > 0) {
      index--;
    } else {
      // 如果不是上下方向键，或者已经到达边界，则不处理
      return;
    }

    // 阻止默认的滚动行为，确保焦点移动而非页面滚动
    event.preventDefault(); 
    // 将焦点设置到新的位置
    inputs[index].focus();
  }

  /**
   * 处理元素获得焦点事件的函数。
   * 当组内的任何一个输入框获得焦点时，更新当前组的索引。
   * @param {FocusEvent} event 焦点事件对象
   */
  function onfocus(event) {
    // 找到当前获得焦点的元素在 `inputs` 数组中的位置，并更新 `index`
    index = inputs.indexOf(event.target);
  }

  // 遍历当前组的所有输入框，为它们添加事件监听器
  inputs.forEach(input => {
    input.addEventListener('keydown', onkeydown); // 监听键盘事件
    input.addEventListener('focus', onfocus);     // 监听焦点事件
  });
});

<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>