如何使用jQuery使HTML画布获得键盘焦点？

Question

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

我可以捕获键盘事件。然而，在Firefox中，当用户按下空格键时，网页会向下滚动。箭头键也是同样的情况。

- Steve Hanov

Answer 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选项更加tricky。

另一个要考虑的问题是，浏览器倾向于用边框勾勒可编辑元素。这可能会让一些用户感到不适。幸运的是，您可以通过这个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

- Xavi

---

这在FF和Chrome中有效，甚至在最新的IE中也有效，但我想指出，在IE中，由于IE处理tabindex和contentEditable的方式，它会导致您在每次单击时滚动到元素的顶部。 - maxfridbe

Answer 2

尝试使用event.preventDefault();。此外，还有keypress、keydown和keyup事件……你可以尝试每个事件，看看哪个有效。

- Caleb

---

哇。这似乎是正确的解决方案。对我来说很有效。但是请注意如何使用它，因为在此过程中可能会意外禁用其他有用的键盘浏览器快捷键。 - Dan Tello