如何使用 jquery 为 HTML 画布提供键盘焦点？答案

【问题标题】：How do I give an HTML canvas the keyboard focus using jquery?如何使用 jquery 为 HTML 画布提供键盘焦点？
【发布时间】：2010-12-22 05:21:36
【问题描述】：

我正在使用 Javascript、jquery 和 Canvas 标签实现游戏。当画布标签获得焦点时，如何防止浏览器处理键盘快捷键？我试过 event.stopPropagation() 没有效果。

我可以接收键盘事件。但是，当用户按下空格键时，网页在 Firefox 中向下滚动。箭头键也是如此。

【问题讨论】：

标签： javascript html dom canvas

【解决方案1】：

根本问题是默认情况下浏览器不会使画布“可聚焦”。我能想到的最佳解决方法是在画布上设置tabindex：

$("#canvas")
    // Add tab index to ensure the canvas retains focus
    .attr("tabindex", "0")
    // Mouse down override to prevent default browser controls from appearing
    .mousedown(function(){ $(this).focus(); return false; }) 
    .keydown(function(){ /* ... game logic ... */ return false; });

如果由于某种原因您无法设置tabindex，您还可以通过将contentEditable 设置为true 来使画布“可聚焦”：

// Add content editable to help ensure the canvas retains focus
$("#canvas").attr("contentEditable", "true")
$("#canvas")[0].contentEditable = true;

这是我最初提出的解决方案，但在我看来，它比tabindex 选项更hackier。

另一件需要考虑的事情是，浏览器倾向于用边框勾勒出内容可编辑的元素。这可能会让一些用户感到反感。幸运的是，你可以用这段 css 摆脱它：

#canvas { outline: none; }

我已经在 Windows XP、Mac OSX 和 Linux 上的 Chrome 3/4/5 和 FireFox 3.0/3.5/3.6 中测试了这两种解决方案。这是一个工作示例：http://xavi.co/static/so-canvas-keyboard.html

【讨论】：

这适用于 FF 和 Chrome，甚至在最新的 ie 中，但我想指出，在 IE 中，由于 IE 处理 tabindex 和内容可编辑

【解决方案2】：

试试event.preventDefault();。还有keypress、keydown 和keyup 事件...您可以尝试每个事件，看看哪个有效。

【讨论】：

哇。这似乎是正确的解决方案。为我工作。虽然要小心使用它，因为您可能会在此过程中无意中禁用其他有用的键盘浏览器快捷方式。