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

I am implementing a game using Javascript, jquery, and the Canvas tag. How can I prevent the browser from processing keyboard shortcuts when the canvas tag has the focus? I have tried event.stopPropagation() and it has no effect.

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

I can pick up keyboard events. However, when the user presses the spacebar, the web page scrolls down in Firefox. The same happens with the arrow keys.

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

2 个解决方案

#1

The root problem is that by default the browser doesn't make the canvas "focusable". The best workaround I could come up with is to set the tabindex on the 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; });

If for whatever reason you can't set the tabindex, you can also make the canvas "focusable" by setting contentEditable to true:

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

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

This is the solution I came up with originally, but in my opinion it's a bit hackier than the tabindex option.

这是我最初提出的解决方案,但在我看来,它比tabindex选项有点骇人听闻。

Another thing to consider is that browsers tend to outline content editable elements with a border. This can be off-putting to some users. Luckily, you can get rid of it with this bit of css:

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

#canvas { outline: none; }

I've tested both solutions in Chrome 3/4/5 and FireFox 3.0/3.5/3.6 on Windows XP, Mac OSX and Linux. Here's a working example: http://xavi.co/static/so-canvas-keyboard.html

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

#2

Try event.preventDefault();. Also there are keypress, keydown, and keyup events... you could try each of them to see which works.

尝试event.preventDefault();.还有keypress,keydown和keyup事件......你可以尝试每个事件来查看哪些有效。

#1