allegare eventi della tastiera alla tela HTML5

Question

Sembra che mouse events aggiunga listener agli elementi canvas, ma che non sia funzionante per gli elementi canvas.

Esempio: http://jsfiddle.net/H8Ese/1/

Browser: Chrome 14,0 FF 5.0.1

So che posso usare gli ascoltatori a livello di documento, ma sto cercando di ottenere l'elemento Canvas prima (in modo che la tua tastiera funziona ovunque nella pagina).

Tutte le idee su come ottenere evento chiave ascolto a lavorare su elementi canvas?

Answer 1

Non credo che è possibile aggiungere listener di eventi tastiera direttamente sulla tela. Se non si desidera registrare il gestore di eventi a livello di finestra, penso che si possa avvolgere la tela all'interno di un div e registrare gli eventi della tastiera sul 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!"); 
}); 

Un altro modo interessante è quello di utilizzare tabIndex sul cartellino tela e legare pressione di un tasto sulla tela. Ho aggiornato il codice su jsfiddle, incollando anche qui per riferimenti futuri.

<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();