JS / JQuery：在HTML Canvas上未检测到按键

Question

在我的网页中，我试图在画布上按下任何键时触发警报。 但是，在画布中按下一个键时不会触发任何事件。 以下是我的HTML，CSS和JavaScript / JQuery代码。

HTML ：

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

CSS ：

#myCanvas {
  display: none;
}

JavaScript / jQuery ：

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

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

Answer 1

您可以使用window.addEventListener("keydown", handleKeyPress); 当您按键时触发事件。

在HTML5 canvas中创建关键事件的最佳方法是什么？

Answer 2

首先使用tabindex="1"和canvas.focus()聚焦画布。 请尝试以下方式：

 window.onload = function() { var canvas = document.getElementById('myCanvas'); canvas.focus(); canvas.addEventListener("keypress", handleKeyPress); function handleKeyPress(e) { alert("keyPressed!"); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;" tabindex="1"> </canvas> 

或：您可以尝试在画布上使用addEventListener进行键盘按下