javascript - 如何使用 jquery 为 HTML Canvas 提供键盘焦点？

Question

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

我可以接收键盘事件。但是，当用户按下空格键时，网页在 Firefox 中向下滚动。箭头键也会发生同样的情况。

Answer 1

根本问题是默认情况下浏览器不会使 Canvas “可聚焦”。我能想到的最佳解决方法是在 Canvas 上设置 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 使 Canvas “可聚焦”:

// 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