如何对querySelectorAll()返回的元素实现键盘上下键焦点切换？

原代码核心问题 #

你的代码无报错但不生效，是存在几个逻辑错误：

• 方向键值匹配错误：37是左方向键的keyCode，你要的下方向键对应keyCode为40，按上下键不会触发你写的逻辑分支
• 聚焦元素未同步更新：你仅在初始化时给focused赋值了一次，后续i变化后没有重新获取对应下标的元素，始终调用的是第一个元素的focus()方法，看不到切换效果
• 没有做边界校验：i不断增减会超出数组下标范围，后续会出现报错隐患
• 未阻止默认行为：上下方向键默认会触发页面滚动，会干扰焦点切换体验

修正后完整代码 #

const matches = document.querySelectorAll("div.dropdown-content > a");
let currentIndex = 0;

document.onkeydown = function(e) {
    // 无匹配元素直接返回，避免报错
    if (matches.length === 0) return;

    if (e.key === 'ArrowDown' || e.keyCode === 40) {
        // 下翻，超出数组长度回到第一个元素
        currentIndex = (currentIndex + 1) % matches.length;
        e.preventDefault();
    } else if (e.key === 'ArrowUp' || e.keyCode === 38) {
        // 上翻，小于0回到最后一个元素
        currentIndex = currentIndex === 0 ? matches.length - 1 : currentIndex - 1;
        e.preventDefault();
    } else {
        // 其余按键不处理
        return;
    }

    // 给对应下标的元素设置焦点
    matches[currentIndex].focus();
};

额外注意事项 #

• 如果你的a标签没有设置href属性，需要给每个a标签添加tabindex="0"属性，才能正常获取焦点
• 如果下拉菜单默认隐藏，建议在菜单显示时绑定键盘事件，隐藏时解绑，避免菜单未展示时误触发逻辑

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