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);触发事件。

What's the best way to create key events in 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 for keydown on Canvas

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

2 个答案: