JavaScript字母按键无法触发选择功能的问题解决方案

代码存在4处直接导致功能失效的问题：

• 未绑定任何键盘、鼠标事件监听器，你当前能使用左右方向键切换是浏览器自带的表单控件焦点切换行为，和你写的JS逻辑无关
• 字母键A/S/D/F/G/H的处理逻辑和方向键完全一致，仅写了焦点移动分支，没有对应触发选中、播放音效的逻辑
• HTML中按钮元素重复声明class属性，第二个属性值会被浏览器直接忽略，后续样式绑定、元素选择会出现异常
• 获取按钮对应按键值时直接调用innerHTML，会把<aside>标签内的音效描述文本一并取出，按键匹配逻辑无法生效

1. 修正HTML属性错误 #

把按钮重复的class属性合并，避免属性丢失：

<section id="keys" aria-label="Zelda Sounds" role="region">
  <button data-key="65" class="sound key" aria-label="Key A">A<aside>Hey! Over Here!</aside></button>
  <button data-key="83" class="sound key" aria-label="Key S">S<aside>Link, Listen!</aside></button>
  <button data-key="68" class="sound key" aria-label="Key D">D<aside>Gold Skulltula</aside></button>
  <button data-key="70" class="sound key" aria-label="Key F">F<aside>Item Found!</aside></button>
  <button data-key="71" class="sound key" aria-label="Key G">G<aside>Silver Rupee</aside></button>
  <button data-key="72" class="sound key" aria-label="Key H">H<aside>Found a Heart!</aside></button>
</section>

2. 补全CSS交互反馈样式 #

在原有CSS代码末尾追加按下、焦点状态的样式，操作反馈更清晰：

button.playing {
  transform: scale(1.1);
  border-color: #ffc600;
  box-shadow: 0 0 1rem #ffc600;
}
button:focus {
  outline: none;
  border-color: #00ffff;
  box-shadow: 0 0 1rem #00ffff;
}

3. 重写JS逻辑，区分按键行为 #

替换原有JS代码，明确拆分方向键（焦点移动）、字母键（直接触发对应音效）、鼠标点击的逻辑，补全事件绑定：

// 初始化获取所有音效按钮，默认给第一个按钮焦点
const soundButtons = Array.from(document.querySelectorAll('#keys button'));
soundButtons[0].focus();

/**
 * 移动焦点到指定索引的按钮
 * @param {number} targetIndex 目标按钮索引
 */
const moveFocus = (targetIndex) => {
  const maxIndex = soundButtons.length - 1;
  // 处理边界循环：到第一个再往左跳到最后一个，到最后一个再往右跳到第一个
  const finalIndex = targetIndex < 0 ? maxIndex : targetIndex > maxIndex ? 0 : targetIndex;
  // 清除所有按钮的选中态，给目标按钮加焦点和选中态
  soundButtons.forEach(btn => btn.classList.remove('active'));
  soundButtons[finalIndex].classList.add('active');
  soundButtons[finalIndex].focus();
}

/**
 * 触发对应按钮的音效播放逻辑
 * @param {HTMLElement} button 目标按钮元素
 */
const triggerSound = (button) => {
  // 取按钮的首文本节点作为按键名，避免把aside里的音效说明带进来
  const keyName = button.firstChild.textContent.trim();
  const soundDesc = button.querySelector('aside').textContent;
  // 这里后续替换成你实际的音频播放代码即可
  console.log('触发按键：', keyName, '对应音效：', soundDesc);
  // 加按下动效
  button.classList.add('playing');
  setTimeout(() => button.classList.remove('playing'), 100);
}

// 键盘按下事件处理
const handleKeyDown = (e) => {
  const currentFocusIndex = soundButtons.indexOf(document.activeElement);
  // 左右方向键：仅移动焦点
  if(e.code === 'ArrowRight') {
    e.preventDefault();
    moveFocus(currentFocusIndex + 1);
    return;
  }
  if(e.code === 'ArrowLeft') {
    e.preventDefault();
    moveFocus(currentFocusIndex - 1);
    return;
  }
  // 字母键映射：直接匹配对应按钮，移动焦点+触发音效
  const keyBindMap = {
    'KeyA': 0,
    'KeyS': 1,
    'KeyD': 2,
    'KeyF': 3,
    'KeyG': 4,
    'KeyH': 5
  }
  if(keyBindMap.hasOwnProperty(e.code)) {
    e.preventDefault();
    const targetIndex = keyBindMap[e.code];
    moveFocus(targetIndex);
    triggerSound(soundButtons[targetIndex]);
    return;
  }
  // 回车/空格：触发当前焦点按钮的音效
  if(e.code === 'Space' || e.code === 'Enter') {
    e.preventDefault();
    triggerSound(document.activeElement);
  }
}

// 鼠标点击事件处理
const handleClick = (e) => {
  const targetBtn = e.target.closest('button.sound');
  if(!targetBtn) return;
  const targetIndex = soundButtons.indexOf(targetBtn);
  moveFocus(targetIndex);
  triggerSound(targetBtn);
}

// 绑定全局事件
document.addEventListener('keydown', handleKeyDown);
document.addEventListener('click', handleClick);

• 初始化阶段提前预加载所有音效对应的Audio对象，避免第一次按键时出现加载延迟
• 可以给每个按钮绑定自定义属性存音频地址，不用硬写按键映射，后续新增音效按钮不用改JS逻辑
• 可增加按键锁定逻辑，避免快速连按时音效重叠混乱

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