键盘项目中addEventListener实现求助：按键联动显示与背景变色

HTML结构 #

先创建模拟键盘的按钮，给每个按钮加上data-key属性，值对应物理键盘按键的字符（比如字母、数字、特殊键的名称）：

<div class="keyboard">
  <button data-key="a">A</button>
  <button data-key="s">S</button>
  <button data-key="d">D</button>
  <button data-key="f">F</button>
  <!-- 其他按键按这个格式添加 -->
  <button data-key="shift">Shift</button>
  <button data-key="enter">Enter</button>
</div>

CSS样式 #

定义按钮的默认样式，以及按下时的高亮样式：

.keyboard button {
  width: 50px;
  height: 50px;
  margin: 5px;
  border: none;
  border-radius: 4px;
  background-color: #e0e0e0;
  font-size: 16px;
  transition: background-color 0.1s;
}

.keyboard button.active {
  background-color: #4CAF50;
  color: white;
}

JavaScript逻辑 #

添加键盘事件监听，匹配对应按钮并切换样式：

// 按键按下时触发高亮
document.addEventListener('keydown', (e) => {
  // 统一转小写，避免大小写匹配问题
  const key = e.key.toLowerCase();
  const button = document.querySelector(`button[data-key="${key}"]`);
  if (button) {
    button.classList.add('active');
  }
});

// 按键松开时恢复原样式
document.addEventListener('keyup', (e) => {
  const key = e.key.toLowerCase();
  const button = document.querySelector(`button[data-key="${key}"]`);
  if (button) {
    button.classList.remove('active');
  }
});

注意事项 #

• 特殊按键（如Shift、Enter、Backspace）的data-key值要和event.key返回值一致，可通过console.log(e.key)在控制台查看具体按键名称
• 若需处理按住按键持续触发的场景，可添加防抖逻辑避免样式频繁切换

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