एचटीएमएल 5 कैनवास

Question

पर कीबोर्ड घटनाओं को संलग्न करें ऐसा लगता है कि mouse events श्रोताओं को canvas तत्वों को ठीक से जोड़ देगा, लेकिन keyboard eventscanvas तत्वों के लिए काम नहीं कर रहा है।

उदाहरण: http://jsfiddle.net/H8Ese/1/

ब्राउज़र: क्रोम 14.0 एफएफ 5.0.1

मैं जानता हूँ कि मैं दस्तावेज़ स्तर श्रोताओं का उपयोग कर सकते हैं, लेकिन मुझे लगता है कि (ताकि पहले कैनवास तत्व प्राप्त करने के लिए कोशिश कर रहा हूँ आपका कीबोर्ड पृष्ठ पर हर जगह काम करता है)।

कैनवास तत्वों पर काम करने के लिए महत्वपूर्ण घटना कैसे प्राप्त करें इस बारे में कोई विचार?

Answer 1

मुझे नहीं लगता कि आप सीधे कैनवास पर कीबोर्ड ईवेंट श्रोता जोड़ सकते हैं। यदि आप विंडो स्तर पर ईवेंट हैंडलर पंजीकृत नहीं करना चाहते हैं तो मुझे लगता है कि आप एक div के अंदर कैनवास लपेट सकते हैं और div पर कीबोर्ड ईवेंट पंजीकृत कर सकते हैं।

<div id="canvasWrapper" style="border:1px solid; width:600px; height:400px;"> 
     <canvas id="canvas" width="600" height="400" > 
      Could not create Canvas! 
     </canvas> 
</div> 

jQuery("#canvasWrapper").keypress(function(e){ 
keys[e.keyCode] = true; 
alert("key pressed!"); 
}); 

एक और दिलचस्प तरीका कैनवास टैग पर टैबइंडेक्स का उपयोग करना और कैनवास पर कुंजीपटल बांधना है। मैंने jsfiddle पर कोड अपडेट किया है, यहां भविष्य के संदर्भों के लिए भी चिपकाया है।

<canvas id="my-canvas" tabindex="1"></canvas> 


$("#my-canvas").bind({ 
keydown: function(e) { 
    var key = e.keyCode; 
    var elem=document.getElementById("my-canvas"); 

    var context=elem.getContext("2d"); 
    context.font = "bold 20px sans-serif"; 
    context.clearRect(0,0,300,200); 
    context.fillText("key pressed " + key, 10,29); 

}, 

focusin: function(e) { 
    $(e.currentTarget).addClass("selected"); 
}, 

focusout: function(e) { 
    $(e.currentTarget).removeClass("selected"); 
} 
}); 
$("#my-canvas").focus();