如何实现按下B键时在页面多个按钮间切换焦点？

问题场景 #

我是前端新手，正在开发一个功能：按下B键时，页面焦点从当前按钮切换至下一个按钮。目前能将焦点定位在第一个按钮上，但再次按下B键时，焦点始终停留在第一个按钮。

原有代码 #

HTML：

<button>Button 1</button><br>
<button>Button 2</button><br>
<button>Button 3</button><br>
<button>Button 4</button><br>
<button>Button 5</button><br>

JavaScript：

let btn = document.querySelector("button");
document.body.addEventListener("keypress", (e) => {
  if (e.key == "b") {
    e.preventDefault();
    document.querySelector("button").focus();
  }
});

问题原因 #

你的代码每次按下B键时，都通过document.querySelector("button")获取按钮并设置焦点，但这个方法只会返回页面中第一个匹配的按钮元素，所以无论按多少次，焦点都会固定在第一个按钮上，无法实现切换。

解决方案 #

要实现焦点切换，需要先获取所有按钮元素，跟踪当前聚焦按钮的索引，每次按B键时计算下一个按钮的位置并设置焦点。如果需要循环切换（最后一个按钮后回到第一个），可以用取模运算实现；如果不需要循环，到最后一个按钮就停止切换也可以调整逻辑。

修改后的代码：

<button>Button 1</button><br>
<button>Button 2</button><br>
<button>Button 3</button><br>
<button>Button 4</button><br>
<button>Button 5</button><br>

// 获取页面中所有按钮，转为数组方便操作
const buttons = Array.from(document.querySelectorAll("button"));
// 跟踪当前聚焦按钮的索引，初始为-1表示未聚焦任何按钮
let currentIndex = -1;

document.body.addEventListener("keypress", (e) => {
  // 兼容大小写B的情况
  if (e.key.toLowerCase() === "b") {
    e.preventDefault();
    // 计算下一个按钮索引，取模实现循环切换
    currentIndex = (currentIndex + 1) % buttons.length;
    // 给对应按钮设置焦点
    buttons[currentIndex].focus();
  }
});

如果不需要循环切换，当焦点在最后一个按钮时按下B键不再变化，可以把索引计算改为：

currentIndex = Math.min(currentIndex + 1, buttons.length - 1);

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