js实现左右键选中按钮

在JavaScript中实现左右键选中按钮的功能，通常涉及到键盘事件监听和按钮状态的改变。以下是一个基础的实现示例：

基础概念

键盘事件：JavaScript允许监听键盘按下（keydown）、弹起（keyup）和按键（keypress）等事件。
焦点管理：通过设置元素的tabindex属性，可以让非表单元素获得焦点，并通过键盘导航。
事件委托：利用事件冒泡机制，将事件处理程序绑定到父元素上，减少内存消耗和提高性能。

实现步骤

HTML结构：创建一组按钮，并为它们设置适当的tabindex值。
CSS样式：定义选中状态的样式。
JavaScript逻辑：监听键盘事件，根据左右键改变当前选中的按钮。

示例代码

HTML

<div id="button-container">
  <button class="selectable-button" tabindex="0">Button 1</button>
  <button class="selectable-button" tabindex="-1">Button 2</button>
  <button class="selectable-button" tabindex="-1">Button 3</button>
</div>

CSS

.selectable-button {
  padding: 10px;
  margin: 5px;
  border: 1px solid #ccc;
}

.selectable-button:focus {
  border-color: blue;
  outline: none;
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const buttons = document.querySelectorAll('.selectable-button');
  let currentIndex = 0;

  // 初始化第一个按钮为选中状态
  buttons[currentIndex].focus();

  document.addEventListener('keydown', function(event) {
    if (event.key === 'ArrowLeft') {
      buttons[currentIndex].tabIndex = -1;
      currentIndex = (currentIndex > 0) ? currentIndex - 1 : buttons.length - 1;
    } else if (event.key === 'ArrowRight') {
      buttons[currentIndex].tabIndex = -1;
      currentIndex = (currentIndex < buttons.length - 1) ? currentIndex + 1 : 0;
    }
    buttons[currentIndex].tabIndex = 0;
    buttons[currentIndex].focus();
  });
});