如何使用jQuery爲HTML畫布提供鍵盤焦點？

我正在實現一個使用Javascript，jQuery和Canvas標籤的遊戲。當畫布標籤具有焦點時，如何防止瀏覽器處理鍵盤快捷方式？我試過event.stopPropagation（），它沒有效果。如何使用jQuery爲HTML畫布提供鍵盤焦點？

我可以拿起鍵盤事件。但是，當用戶按空格鍵時，網頁會在Firefox中向下滾動。箭頭鍵也是一樣。

來源

2009-12-01 Steve Hanov

嘗試event.preventDefault();。還有keypress,和keyup事件...你可以嘗試每個人看看哪些作品。

來源

2009-12-02 00:49:26 Caleb

Woot。這似乎是適當的解決方案。適用於我。雖然要小心你如何使用它，因爲你可能會在過程中無意中禁用其他有用的鍵盤瀏覽器快捷方式。 – 2012-03-20 22:35:02

根本問題是，默認情況下，瀏覽器不會使畫布「可調焦」。我可以拿出最好的解決方法是設置tabindex在畫布上：通過設置contentEditable爲true

$("#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，還可以使畫布「可聚焦」：

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

來源

2009-12-02 05:35:50 Xavi

這適用於FF和Chrome，甚至在最新的ie中，但我想指出，在IE中它會導致你滾動到每次點擊元素的頂部，因爲IE對待tabindex和contentEditable的方式 – maxfridbe 2014-02-25 18:59:36

如何使用jQuery爲HTML畫布提供鍵盤焦點？

回答

相關問題