嘿，这个场景我太熟悉了！你已经搞定了按下时的黄色高亮，那要处理释放动作其实只需要多监听一个keyup事件就行，咱们一步步来：

核心思路 #

键盘事件里，keydown是按键按下时触发，keyup就是按键松开时触发的，刚好对应你需要的“高亮-取消高亮”两个状态。因为你的按键ID都是对应的ASCII编码，所以只要在两个事件里分别找到对应ID的元素，添加/移除高亮类就搞定了。

具体实现代码 #

首先先准备好高亮的CSS类（如果还没写的话）：

.highlight-yellow {
  background-color: #ffff00; /* 或者你喜欢的黄色色调 */
  /* 可以再加个边框或者阴影增强视觉效果 */
  border: 2px solid #ffd700;
}

然后是JavaScript部分，把keydown和keyup事件都监听上：

// 处理按键按下：添加高亮
document.addEventListener('keydown', function(e) {
  // 获取当前按键的ASCII编码
  const keyAscii = e.key.charCodeAt(0);
  // 找到对应ID的按键元素
  const targetKey = document.getElementById(keyAscii);
  
  if (targetKey) {
    targetKey.classList.add('highlight-yellow');
  }
});

// 处理按键释放：移除高亮
document.addEventListener('keyup', function(e) {
  const keyAscii = e.key.charCodeAt(0);
  const targetKey = document.getElementById(keyAscii);
  
  if (targetKey) {
    targetKey.classList.remove('highlight-yellow');
  }
});

额外注意点 #

• 大小写匹配问题：如果你的按键ID是小写字母的ASCII（比如'a'对应97），但用户按下Shift+A时，e.key会是'A'，对应的ASCII是65，这时候就找不到元素了。解决办法是统一转成小写（或大写）再取编码：

  // 转成小写后获取ASCII
  const keyAscii = e.key.toLowerCase().charCodeAt(0);
  

• 特殊按键过滤：像Shift、Ctrl、Alt这些功能键，它们的key值是"Shift"、"Control"这类字符串，charCodeAt(0)拿到的编码和你键盘界面的按键ID不匹配，所以可以加个过滤：

  // 定义你键盘界面包含的有效按键字符
  const validKeyChars = 'abcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+-=[]{}|;:,.<>?';
  
  document.addEventListener('keyup', function(e) {
    // 如果不是有效字符，直接跳过
    if (!validKeyChars.includes(e.key.toLowerCase())) return;
    
    const keyAscii = e.key.toLowerCase().charCodeAt(0);
    const targetKey = document.getElementById(keyAscii);
    
    if (targetKey) {
      targetKey.classList.remove('highlight-yellow');
    }
  });
  

这样调整后，你的键盘界面就能完美实现按下高亮、释放取消高亮的效果啦！

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