jqueryを使用してHTMLキャンバスにキーボードフォーカスを与える方法を教えてください。

Question

私は、Javascript、jquery、およびCanvasタグを使用してゲームを実装しています。キャンバスタグにフォーカスがあるときに、ブラウザがキーボードショートカットを処理しないようにするにはどうすればよいですか？ event.stopPropagation（）を試してみましたが効果がありません。

私はキーボードイベントを受け取ることができます。しかし、ユーザーがスペースバーを押すと、WebページはFirefoxでスクロールダウンします。矢印キーでも同じことが起こります。

Answer 1

Try event.preventDefault();また、keypress,​​、およびkeyupというイベントがあります...それぞれを試してみるとどの作品が見られるでしょうか。

Answer 2

デフォルトでは、ブラウザはキャンバスを「フォーカス可能」にしないという根本的な問題があります。 trueにcontentEditableを設定することにより、何らかの理由であなたが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を設定することです：

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