我正在做测试来检测键盘按键，我想到将其保存在一个数组中，并按照按下的顺序添加按键。例如，如果保留“w”和“a”，则数组将为[“w”，“a”]。当您按住“w”然后按住“SHIFT”时会出现问题。当您停止按住“w”时，该键不会从数组中删除。
注意：要复制问题，请先按住“w”，然后按住“SHIFT”。然后按住“SHIFT”的同时释放“w”。
let keysPressed = [];
document.addEventListener('keydown', (event) => {
if (!keysPressed.includes(event.key)) {
keysPressed.push(event.key)
}
});
document.addEventListener('keyup', (event) => {
const keyIndex = keysPressed.indexOf(event.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)body {
font-family: Arial, sans-serif;
}
.status {
font-size: 1.5em;
color: green;
}<body>
<h2>Hold a key pressed</h2>
<p class="status" id="status">No key pressed</p>
</body>是的。您按下“w”并释放“W”。
如果您想透明地移动，请同时删除“w”。
如果你想在按键级别而不是字符串级别进行交互，也就是说，只需注册任何按下的键（无论按下时的修饰符是什么），然后取消注册任何键（无论释放时的修饰符是什么），然后你应该关注键码，而不是按键。
或者你可以两者都做。如果您想为显示的按键指定一个“字符串”名称，同时能够将释放与先前的按下相匹配，则应保留
keykeycodelowerupperlet keysPressed = [];
let keysCodes = [];
document.addEventListener('keydown', (event) => {
if (!keysCodes.includes(event.keyCode)) {
keysPressed.push(event.key);
keysCodes.push(event.keyCode);
}
});
document.addEventListener('keyup', (event) => {
const keyIndex = keysCodes.indexOf(event.keyCode);
if (keyIndex !== -1) {
keysPressed.splice(keyIndex, 1);
keysCodes.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)body {
font-family: Arial, sans-serif;
}
.status {
font-size: 1.5em;
color: green;
}<body>
<h2>Hold a key pressed</h2>
<p class="status" id="status">No key pressed</p>
</body>