引言：键盘导航的挑战
在构建用户友好的网页表单时，提供键盘导航功能是提升用户体验的关键一环。用户通常期望能够使用上下方向键在输入框之间移动焦点。然而，当页面中存在多列或多组逻辑上独立的输入框时，如果处理不当，可能会遇到一个常见问题：当用户从一列（或一组）输入框切换到另一列时，用于跟踪当前焦点的索引变量没有正确重置，导致光标跳过预期的输入框。
考虑以下HTML结构，其中包含两列输入框，分别带有prev和curr类：
请尝试选择第一列的顶部输入框，向下点击3次到达第四个，然后点击第二列的第一个输入框。
问题分析：共享索引的陷阱
一个常见的初始实现方式是使用一个全局变量I来跟踪当前聚焦元素的索引，并根据当前聚焦元素的类名来决定操作哪个元素集合（prev或curr）。
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();
}
}上述代码的问题在于，I是一个全局变量，在用户从prev列切换到curr列时，I的值并不会自动重置为0。例如，如果用户在prev列向下移动了3次（此时I为3），然后点击了curr列的第一个输入框。此时，isFocus会变为curr，但I仍然是3。当用户再次按下向下箭头时，代码会尝试聚焦curr[4]，而不是curr[1]，从而导致光标跳跃。
解决方案：独立的索引与动态更新
要解决这个问题，核心思想是为每一组（或每一列）输入框维护一个独立的索引，并且在任何时候，当一个输入框获得焦点时，其对应的组索引应该被更新为该输入框在该组中的正确位置。
以下是实现这一目标的优化方案：
// 遍历所有需要特殊键盘导航行为的类名
['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); // 监听焦点变化以重置索引
});
});代码详解与注意事项
-
独立作用域和闭包：
- ['prev', 'curr'].forEach(selector => { ... }); 循环为每个类名创建了一个独立的执行上下文。
- let index = 0; 在这个独立的上下文内部声明，这意味着每次迭代都会有一个新的index变量，它仅对当前selector对应的inputs数组可见。这利用了JavaScript的闭包特性，使得onkeydown和onfocus函数能够访问并修改它们各自的index变量，而不会相互干扰。
-
document.querySelectorAll(.${selector})：
- 使用querySelectorAll代替getElementsByClassName可以返回一个静态的NodeList，通过展开运算符...将其转换为数组，方便后续使用indexOf等数组方法。
-
onkeydown 事件处理：
-
onfocus 事件处理：
- index = inputs.indexOf(event.target); 是解决核心问题的关键。当用户通过鼠标点击或其他方式将焦点切换到此组中的任何一个输入框时，onfocus事件会被触发。我们立即通过indexOf方法找到当前获得焦点的元素在inputs数组中的位置，并将index更新为该位置。这样，无论焦点是如何进入此组的，后续的上下方向键操作都会从当前元素的正确位置开始。
-
事件监听器的添加：
- 为每个input元素同时添加keydown和focus监听器是必要的。keydown用于响应方向键进行导航，focus用于在元素获得焦点时重置其组内的索引。
进阶思考：二维导航
上述解决方案主要针对单列或独立列的垂直导航。如果您的应用场景需要处理更复杂的二维导航（例如，使用ArrowRight和ArrowLeft在列之间切换，同时保持行索引），则需要一个更复杂的2D坐标系统来管理焦点。这通常涉及到：
- 维护一个当前行索引和当前列索引。
- 在keydown事件中，根据按下的方向键（上下左右）来计算新的行和列索引。
- 使用document.querySelector或更复杂的逻辑来根据行/列索引找到目标元素并设置焦点。
总结
通过为每个逻辑组的元素维护独立的索引变量，并在元素获得焦点时动态更新这些索引，我们可以有效地解决在多组表单元素之间进行键盘导航时光标跳跃的问题。这种方法提高了代码的模块化和可维护性，为用户提供了更加流畅和直观的交互体验。
