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

根本问题是默认情况下浏览器不会使画布“可聚焦”。我能想到的最好的解决办法是设置 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; });

如果出于任何原因,你不能设置 ,也可以通过设置 contentEditable 事实上:

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

TAB顺序 选项

另一个需要考虑的是浏览器倾向于用边框勾勒出内容可编辑的元素。这可能会让一些用户感到不快。幸运的是,您可以使用以下css摆脱它:

#canvas { outline: none; }

我在WindowsXP、MacOSX和Linux上用Chrome3/4/5和Firefox3.0/3.5/3.6测试了这两种解决方案。下面是一个工作示例: http://xavi.co/static/so-canvas-keyboard.html

尝试 event.preventDefault(); . 还有 keypress , keydown ,及 keyup