đính kèm các sự kiện bàn phím vào html5 canvas

Question

Có vẻ như mouse events sẽ thêm người nghe vào canvas các yếu tố, nhưng keyboard events dường như không hoạt động với các yếu tố canvas.

Ví dụ: http://jsfiddle.net/H8Ese/1/

Trình duyệt: Chrome 14.0 FF 5.0.1

Tôi biết tôi có thể sử dụng người nghe mức tài liệu, nhưng tôi đang cố gắng để có được những yếu tố Canvas đầu tiên (để bàn phím của bạn hoạt động ở mọi nơi khác trên trang).

Bất kỳ ý tưởng nào về cách thức nghe sự kiện quan trọng hoạt động trên các yếu tố canvas?

Answer 1

Tôi không nghĩ rằng bạn có thể thêm trình xử lý sự kiện bàn phím trực tiếp vào canvas. Nếu bạn không muốn đăng ký trình xử lý sự kiện ở mức cửa sổ thì tôi nghĩ bạn có thể quấn khung bên trong một div và đăng ký các sự kiện bàn phím trên 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!"); 
}); 

Một cách thú vị khác là sử dụng tabIndex trên thẻ canvas và nhấn phím trên canvas. Tôi đã cập nhật mã tại jsfiddle, dán ở đây cũng để tham khảo trong tương lai.

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