如何为虚拟键盘所有按钮实现按键按下/松开的背景色切换？

问题分析 #

你现有代码存在几个核心问题：

• myButton是单个元素，无法匹配所有.letter和.symbol类按钮
• event.keyCode已被废弃，推荐使用标准的event.key
• 未建立按键与对应按钮的匹配逻辑，所有按键都会修改同一个按钮样式
• 直接操作style属性不如通过CSS类维护样式灵活

最优实现方案 #

1. 先通过CSS类控制样式（更易维护）

/* 定义激活状态样式 */
.letter.active, .symbol.active {
  background-color: orange;
}
/* 默认样式 */
.letter, .symbol {
  background-color: white;
  /* 可选：添加过渡动画让切换更平滑 */
  transition: background-color 0.1s ease;
}

2. 修正后的JavaScript代码

// 获取所有目标按钮
const keyButtons = document.querySelectorAll('.letter, .symbol');

// 辅助函数：根据按键找到对应的按钮
function getMatchingButton(key) {
  return Array.from(keyButtons).find(button => {
    // 优先匹配按钮的data-key属性（推荐），没有则匹配按钮文本（不区分大小写）
    const targetKey = button.dataset.key || button.textContent.toLowerCase();
    return targetKey === key.toLowerCase();
  });
}

// 按键按下事件
window.addEventListener('keydown', (event) => {
  const button = getMatchingButton(event.key);
  if (button) {
    button.classList.add('active');
  }
});

// 按键松开事件
window.addEventListener('keyup', (event) => {
  const button = getMatchingButton(event.key);
  if (button) {
    button.classList.remove('active');
  }
});

3. 推荐的HTML按钮写法（可选）

如果按钮文本和按键字符不一致（比如按钮显示大写但对应小写按键），可以通过data-key属性明确绑定：

<button class="letter" data-key="a">A</button>
<button class="symbol" data-key="!">!</button>
<button class="letter" data-key="b">B</button>

关键改进点 #

• 批量选择所有目标按钮，通过按键字符匹配对应按钮
• 使用event.key替代废弃的event.keyCode，兼容现代浏览器
• 通过CSS类控制样式，便于后续修改样式或扩展动画效果
• 支持大小写不敏感匹配，适配按钮文本的大小写差异

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