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

Question

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

我可以拿起键盘事件.但是,当用户按空格键时,网页会在Firefox中向下滚动.箭头键也是如此.

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选项更有点黑客.

另一件需要考虑的事情是浏览器倾向于使用边框勾勒出内容可编辑元素.这对一些用户来说可能是令人不快的.幸运的是,你可以用这个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