问题背景与挑战
在开发交互式网页时，经常需要实现键盘导航功能，例如使用方向键在表单输入框之间切换焦点。一个常见场景是表格布局中的多列输入框，用户希望在当前列中上下移动，切换到另一列时，又能从该列的顶部或当前选中的位置开始上下移动。
原始实现中，开发者可能倾向于使用一个全局变量 I 来跟踪当前焦点在元素列表中的位置。当页面上存在多组（例如，通过不同CSS类名区分的列）输入框时，这种单一的全局索引会带来问题。例如，当从第一列的某个位置切换到第二列的第一个输入框时，如果 I 的值没有重置，那么在第二列中按向下箭头时，焦点会跳过预期的下一个元素，直接跳转到 curr[I] 对应的元素，而 I 仍然是第一列中的旧值，从而导致用户体验不佳。
以下是原始实现的一个简化示例，展示了使用全局索引 I 的潜在问题：
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 列的第一个输入框时，I 的值并未重置为 0。因此，在 curr 列中按下向下箭头时，会根据 I 的旧值来定位，导致焦点跳跃。
解决方案：基于分组的独立索引与焦点重置
解决上述问题的关键在于为每一组（通过类名区分）输入框维护一个独立的索引变量，并且在任何一个输入框获得焦点时，立即更新其所在组的索引变量，使其指向当前获得焦点的元素。这样，每当用户切换到新的列（即新的元素组）时，该组的索引就会被“重置”为当前焦点元素的正确位置。
立即学习“Java免费学习笔记（深入）”；
以下是优化的JavaScript代码实现：
// 遍历所有需要进行键盘导航的元素组的类名
['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); // 监听焦点事件
});
});HTML 结构示例
为了更好地理解上述 JavaScript 代码的工作方式，以下是对应的 HTML 结构示例：
请尝试：选择第一列的顶部输入框，向下点击3次到达第四个，然后点击第二列的第一个输入框。现在向下点击一次，您会看到光标会从该列的顶部开始正确移动。
在这个HTML结构中，class="prev" 的输入框构成了一组，class="curr" 的输入框构成了另一组。JavaScript 代码会分别为这两组输入框创建独立的事件监听器和索引管理机制。
关键点与注意事项
- 独立索引变量： 解决方案的核心是为每个通过类名区分的元素组创建一个独立的 index 变量（通过 forEach 循环和闭包实现）。这确保了不同组之间的导航状态互不影响。
- onfocus 事件的重要性： 当用户通过鼠标点击或 Tab 键切换到某个输入框时，onfocus 事件会触发，并立即更新该组的 index 变量为当前获得焦点的元素位置。这是实现“重置”功能的关键，确保后续的方向键导航从正确的位置开始。
- event.preventDefault()： 在 keydown 事件处理函数中调用 event.preventDefault() 是重要的，它可以阻止浏览器处理默认的方向键行为（例如页面滚动），从而确保焦点完全由我们的JavaScript代码控制。
- 动态获取元素数量： 示例代码中使用了 inputs.length - 1 来确定索引的上限，而不是硬编码的数字（如 5）。这使得代码更加健壮，能够适应不同数量的输入框。
- 扩展性： 这种模式可以轻松扩展到更多具有不同类名的元素组，只需在 ['prev', 'curr'] 数组中添加新的类名即可。
- 2D导航的考虑： 当前解决方案主要处理垂直方向（上下箭头）的导航。如果需要实现水平方向（左右箭头）的导航，或者在更复杂的表格中进行二维导航，则可能需要更复杂的逻辑，例如使用二维坐标（行、列索引）来管理焦点。
总结
通过为每组元素维护独立的索引变量，并在元素获得焦点时动态更新其所在组的索引，我们可以有效地解决在不同元素组之间切换时，方向键导航出现跳跃的问题。这种方法提高了代码的模块化和可维护性，并为用户提供了更加流畅和直观的键盘导航体验。
