키보드 이벤트를 html5 캔버스에 첨부하십시오

Question

요소에 청취자를 추가 할 것으로 보이지만 keyboard events은 canvas 요소에서 작동하지 않는 것 같습니다.

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

브라우저 : 크롬 14.0 FF 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!"); 
}); 

또 다른 흥미로운 방법은 canvas 태그에 tabIndex를 사용하고 캔버스에 keypress를 바인딩하는 것입니다. 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();