Javascript JS/JQuery:在HTML画布上未检测到按键

在我的网页中，每当按下画布上的某个键时，我都会尝试触发警报。但是，在画布中按下键时不会触发任何事件。下面是我的HTML、CSS和JavaScript/JQuery代码

HTML：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

#myCanvas {
  display: none;
}

document.getElementById("defaultCanvas1").addEventListener("keypress", handleKeyPress);

function handleKeyPress(e) {
    alert("keyPressed!");
}

JavaScript/JQuery：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

#myCanvas {
  display: none;
}

document.getElementById("defaultCanvas1").addEventListener("keypress", handleKeyPress);

function handleKeyPress(e) {
    alert("keyPressed!");
}

---

您可以使用window.addEventListener（“keydown”，handleKeyPress）在按键时触发事件

---

首先使用

tabindex=“1”

和

canvas.focus（）

聚焦画布。请尝试以下方法：

window.onload=function（）{
var canvas=document.getElementById（'myCanvas'）；
canvas.focus（）；
canvas.addEventListener（“按键”，handleKeyPress）；
功能手柄按键（e）{
警报（“按键！”）；
}
}

---

@Adam对不起我的错误。您想在窗口元素上调用它。我编辑了我的答案。