मूल समस्या यह है कि डिफ़ॉल्ट रूप से ब्राउज़र कैनवास को "फोकस करने योग्य" नहीं बनाता है। सच करने के लिए contentEditable की स्थापना करके
$("#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 निर्धारित नहीं कर सकते हैं, तो आप भी कैनवास "फ़ोकस करने योग्य" बना सकते हैं: सबसे अच्छा समाधान का मैं के साथ आ सकता है कैनवास पर tabindex स्थापित करने के लिए है :
// Add content editable to help ensure the canvas retains focus
$("#canvas").attr("contentEditable", "true")
$("#canvas")[0].contentEditable = true;
यह समाधान मैं मूल रूप से के साथ आया है, लेकिन मेरी राय में यह थोड़ा tabindex विकल्प की तुलना में hackier है।
विचार करने की एक और बात यह है कि ब्राउज़र सीमा के साथ सामग्री संपादन योग्य तत्वों की रूपरेखा तैयार करते हैं। यह कुछ उपयोगकर्ताओं को बंद कर दिया जा सकता है। सौभाग्य से, आप सीएसएस के इस बिट के साथ इसे से छुटकारा पाने के कर सकते हैं:
#canvas { outline: none; }
मैं Windows XP, मैक OSX और लिनक्स पर क्रोम 3/4/5 और फ़ायरफ़ॉक्स 3.0/3.5/3.6 में दोनों समाधान परीक्षण किया है। यहां एक कामकाजी उदाहरण दिया गया है: http://xavi.co/static/so-canvas-keyboard.html
वूट। यह उचित समाधान प्रतीत होता है। मेरे लिये कार्य करता है। हालांकि सावधान रहें कि आप इसका उपयोग कैसे करते हैं, क्योंकि आप अनजाने में प्रक्रिया में अन्य उपयोगी कीबोर्ड ब्राउज़र शॉर्टकट अक्षम कर सकते हैं। –