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

【问题标题】：JS/JQuery: key press not detected on HTML CanvasJS/JQuery：在 HTML Canvas 上未检测到按键
【发布时间】：2019-01-05 04:56:52
【问题描述】：

在我的网页中，每当在画布上按下某个键时，我都会尝试触发警报。但是，在画布中按下某个键时不会触发任何事件。下面是我的 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!");
}

【问题讨论】：

标签： javascript jquery html css html5-canvas

【解决方案1】：

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

What's the best way to create key events in HTML5 canvas?

【讨论】：

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

【解决方案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

【讨论】：