网页键盘导航的挑战：索引状态管理
在现代网页应用中，为提升用户体验，经常需要实现通过键盘（尤其是方向键）在可聚焦元素之间进行导航的功能。例如，在一个包含多列输入框的表格中，用户可能希望通过上下箭头键在当前列的输入框之间移动。然而，一个常见的陷阱是，当用户从一列（一组元素）切换到另一列（另一组元素）时，如果用于跟踪当前位置的索引变量没有得到妥善管理，就会导致导航行为异常，例如光标跳过某些输入框。
考虑以下场景：页面上有两列输入框，分别带有 prev 和 curr 类。用户在第一列的第四个输入框，然后点击或通过 Tab 键切换到第二列的第一个输入框。此时，如果用户按下向下箭头键，期望光标移动到第二列的第二个输入框。但如果索引变量没有重置，它可能会从上次第一列的索引值继续递增，导致光标跳到第二列的第五个甚至更远的输入框。
最初的尝试可能如下所示，它使用一个全局变量 I 来跟踪当前元素的索引：
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(); // 阻止默认滚动行为
}
}配套的 HTML 结构可能如下：
尝试选择第一列的顶部输入框，向下点击3次到达第四个，然后点击第二列的第一个输入框。现在点击向下一次，你会发现光标跳到了第五个框。
上述代码的问题在于 I 是一个全局变量，它被 prev 和 curr 两组元素共享。当从 prev 组切换到 curr 组时，I 的值不会自动重置为 0，而是保留了在 prev 组时的值。这导致在 curr 组中按下方向键时，光标会从一个非 0 的索引开始移动，从而跳过前面的输入框。
解决方案：为每个元素组维护独立的索引并动态更新
要解决这个问题，关键在于为每一组可导航的元素（例如，具有相同类名的所有输入框）维护一个独立的索引变量。此外，当一个元素获得焦点时，其对应的索引变量必须被更新，以反映该元素在其组内的实际位置。这样，无论用户是通过键盘还是鼠标切换到某个元素，随后的方向键导航都能从正确的位置开始。
以下是实现这一策略的详细步骤和代码：
1. HTML 结构
HTML 结构保持不变，因为它定义了我们的目标元素组。
尝试选择第一列的顶部输入框，向下点击3次到达第四个，然后点击第二列的第一个输入框。
2. JavaScript 实现
我们将遍历所有需要独立导航的元素组（通过类名区分），为每个组创建其独立的逻辑。
// 定义所有需要独立导航的元素组的类名
['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); // 监听焦点变化以更新索引
});
});3. 代码解析与注意事项
- 独立作用域和局部变量 index：通过 ['prev', 'curr'].forEach(selector => { ... }) 结构，我们为每个 selector（即每个类名组）创建了一个独立的闭包。在这个闭包内部声明的 let index = 0; 是该组独有的局部变量。这意味着 prev 组有自己的 index，curr 组也有自己的 index，它们互不干扰。
- onfocus 事件的重要性：这是解决方案的核心。当用户通过鼠标点击或 Tab 键从一个组切换到另一个组，或者在同一个组内切换焦点时，onfocus 事件会触发。index = inputs.indexOf(event.target); 这一行代码会根据当前获得焦点的元素，立即更新该组的 index 变量。这样，当用户随后按下方向键时，onkeydown 函数会使用一个已经同步到当前焦点位置的 index 值，确保导航的准确性。
- event.preventDefault()：在 onkeydown 函数中，调用 event.preventDefault() 是非常重要的。它阻止了浏览器处理方向键的默认行为（例如，滚动页面），从而允许我们完全控制焦点移动。
- 边界检查：index 0 确保了索引不会超出数组的有效范围，避免了访问不存在的元素导致错误。
- 可扩展性：如果未来需要添加更多组的输入框（例如 class="third-column"），只需在 ['prev', 'curr'] 数组中添加新的类名即可，无需修改核心逻辑，代码结构具有良好的可扩展性。
总结与进一步思考
通过为每个元素组维护独立的索引变量，并利用 focus 事件动态更新这些索引，我们成功解决了在不同元素组之间切换时键盘导航索引错乱的问题。这种模式在处理类似的用户界面交互时非常有用，它强调了局部状态管理和事件驱动更新的重要性。
值得注意的是，上述解决方案主要处理垂直方向的导航。如果需要实现更复杂的二维导航（例如，使用 ArrowRight 和 ArrowLeft 在列之间切换，同时保持行索引），则可能需要一个更复杂的二维坐标系统来跟踪 [row, col] 状态，并在 keydown 事件中根据方向键调整这两个坐标。然而，对于大多数简单的列表式导航场景，本文提供的独立索引方案已经足够高效和健壮。
