adjuntar eventos del teclado al lienzo html5

Question

Parece que mouse events agregará oyentes a canvas elementos bien, pero keyboard events no parecen funcionar para los elementos canvas.

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

navegadores: Chrome 14,0 FF 5.0.1

Sé que puedo utilizar los oyentes nivel de documento, pero estoy tratando de obtener el primer elemento Canvas (de modo que su teclado funciona en todos los demás lugares de la página).

¿Alguna idea sobre cómo obtener la escucha de un evento clave trabajando en elementos de lienzo?

Answer 1

No creo que pueda agregar el detector de eventos del teclado directamente al lienzo. Si no desea registrar el controlador de eventos en el nivel de la ventana, entonces creo que puede envolver el lienzo dentro de un div y registrar los eventos del teclado en el 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!"); 
}); 

Otra forma interesante es usar tabIndex en la etiqueta canvas y obligar a presionar teclas en el lienzo. He actualizado el código en jsfiddle, pegándolo aquí también para futuras referencias.

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