如何用方向键切换3x3矩阵的box选中状态并按ENTER确认？

直接基于现有代码改造，核心是跟踪当前选中的Box索引，监听键盘事件处理方向切换，同时添加回车确认逻辑。以下是完整实现代码：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<style>
   .box{
   background-color:rgb(100,12,120);
   height: 100px;
   width:100px;
   transition: transform .6s;
   }
   .box:hover{
   transform: scale(1.1);
   background-color:rgb(200,150,120);
   }
   .active {
   background-color: rgb(100,150,255);
   color: white;
   }
</style>
<div class="container m-5" id="myDIV">
   <div class="d-flex justify-content-around m-3">
      <div class="box "></div>
      <div class="box"></div>
      <div class="box"></div>
   </div>
   <div class="d-flex justify-content-around m-3">
      <div class="box"></div>
      <div class="box active"></div>
      <div class="box"></div>
   </div>
   <div class="d-flex justify-content-around m-3">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
   </div>
</div>
<script>
   const container = document.getElementById("myDIV");
   const boxes = Array.from(container.getElementsByClassName("box"));
   // 初始化当前选中的索引
   let currentIndex = boxes.findIndex(box => box.classList.contains('active'));

   // 保留原有点击切换选中逻辑
   boxes.forEach(box => {
     box.addEventListener("click", function() {
       boxes[currentIndex].classList.remove('active');
       currentIndex = boxes.indexOf(this);
       this.classList.add('active');
     });
   });

   // 键盘事件处理函数
   function handleKeydown(e) {
     let newIndex = currentIndex;
     // 处理方向键与回车
     switch(e.key) {
       case 'ArrowUp':
         // 上移：索引减3，限制在第一行及以下
         if(currentIndex >=3) newIndex = currentIndex -3;
         break;
       case 'ArrowDown':
         // 下移：索引加3，限制在第三行及以上
         if(currentIndex <6) newIndex = currentIndex +3;
         break;
       case 'ArrowLeft':
         // 左移：不能是当前行第一个元素
         if(currentIndex %3 !==0) newIndex = currentIndex -1;
         break;
       case 'ArrowRight':
         // 右移：不能是当前行最后一个元素
         if(currentIndex %3 !==2) newIndex = currentIndex +1;
         break;
       case 'Enter':
         // 回车确认：计算选中的行和列（从1开始计数）
         const row = Math.floor(currentIndex /3) +1;
         const col = (currentIndex %3) +1;
         alert(`确认选中第${row}行第${col}列的Box`);
         // 可替换为自定义确认逻辑，比如提交表单、触发API等
         return;
       default:
         // 其他按键不处理
         return;
     }
     // 索引变化时切换active状态
     if(newIndex !== currentIndex) {
       boxes[currentIndex].classList.remove('active');
       currentIndex = newIndex;
       boxes[currentIndex].classList.add('active');
     }
   }

   // 监听全局键盘按下事件
   document.addEventListener('keydown', handleKeydown);
</script>

关键逻辑说明： #

• 元素集合转数组：把getElementsByClassName返回的HTMLCollection转成数组，方便使用indexOf、findIndex等数组方法操作元素。
• 跟踪选中索引：用currentIndex记录当前处于active状态的Box位置，是方向切换的核心依据。
• 方向键边界处理：
  • 上移时限制索引≥3，避免跳出第一行
  • 下移时限制索引<6，避免跳出第三行
  • 左移时判断索引%3≠0，避免跳出行首
  • 右移时判断索引%3≠2，避免跳出行尾
• 回车确认：计算选中的行和列（从1开始计数），示例用alert提示，可替换为自定义业务逻辑。
• 兼容原有交互：保留了鼠标点击切换选中的功能，新旧操作互不冲突。

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