按住SHIFT时按键释放未被正确检测的技术问题求助

问题现象 #

实现按住按键按顺序存入数组、松开时从数组移除的功能时，出现以下异常：

• 按住"w"后按下SHIFT，保持SHIFT按住状态下松开"w"，数组中的"w"并未被移除。

问题原因 #

当SHIFT处于按住状态时，松开"w"触发的keyup事件中，event.key的值会变为大写的"W"，而数组中存储的是小写的"w"。由于indexOf()是严格匹配，无法找到对应元素，导致无法执行移除操作。

解决方案 #

在处理keydown和keyup事件时，统一将event.key转为小写（或大写），确保按键的存储和移除逻辑使用一致的格式。

修复后的完整代码 #

JavaScript

let keysPressed = [];

document.addEventListener('keydown', (event) => {
  const key = event.key.toLowerCase(); // 统一转为小写
  if (!keysPressed.includes(key)) {
    keysPressed.push(key)
  }
});

document.addEventListener('keyup', (event) => {
  const key = event.key.toLowerCase(); // 统一转为小写
  const keyIndex = keysPressed.indexOf(key);
  if (keyIndex !== -1) {
    keysPressed.splice(keyIndex, 1)
  }
});

function update() {
  if (keysPressed.length > 0) {
    document.getElementById('status').innerHTML = `Pressed keys: ${keysPressed.join(', ')}<br>Last pressed key: ${keysPressed[keysPressed.length - 1]}`;
  } else {
    document.getElementById('status').textContent = 'No keys pressed'
  }
  requestAnimationFrame(update)
}

requestAnimationFrame(update)

CSS

body { 
  font-family: Arial, sans-serif; 
}

.status { 
  font-size: 1.5em; 
  color: green; 
}

HTML

<body>
  <h2>Hold a key pressed</h2>
  <p class="status" id="status">No key pressed</p>
</body>

补充说明 #

如果需要区分大小写按键（比如大写W和小写w），可以改用event.code代替event.key。event.code会返回按键的物理编码（比如KeyW），不受修饰键影响，能更精准地匹配物理按键。示例如下：

document.addEventListener('keydown', (event) => {
  const key = event.code;
  if (!keysPressed.includes(key)) {
    keysPressed.push(key)
  }
});

document.addEventListener('keyup', (event) => {
  const key = event.code;
  const keyIndex = keysPressed.indexOf(key);
  if (keyIndex !== -1) {
    keysPressed.splice(keyIndex, 1)
  }
});

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