addEventListener per il keydown su Canvas

Question

Sto provando a creare un'app canvas che risponda all'input di tastiera e mouse. Ho questo codice:

canvas = document.getElementById('canvas'); 
canvas.addEventListener('mousedown', function(event) { 
    alert('mousedown'); 
     }, false); 
canvas.addEventListener('keydown', function(event) { 
    alert('keydown'); 
     }, false); 

L'allarme 'mousedown' esce ogni volta che si fa clic sul mouse, ma vigile il 'keydown' non viene mai in su. Lo stesso codice funziona bene su JS Bin: http://jsbin.com/uteha3/66/

Perché non funziona sulla mia pagina? La tela non riconosce l'input da tastiera?

Answer 1

Modifica - Questa risposta è una soluzione, ma un approccio molto più semplice e corretto sarebbe impostando l'attributo tabindex sull'elemento tela (come suggerito da hobberwickey).

Non è possibile mettere a fuoco un elemento di tela. Un semplice lavoro su questo, sarebbe quello di rendere il tuo "proprio" focus.

var lastDownTarget, canvas; 
window.onload = function() { 
    canvas = document.getElementById('canvas'); 

    document.addEventListener('mousedown', function(event) { 
     lastDownTarget = event.target; 
     alert('mousedown'); 
    }, false); 

    document.addEventListener('keydown', function(event) { 
     if(lastDownTarget == canvas) { 
      alert('keydown'); 
     } 
    }, false); 
} 

JSFIDDLE

Answer 2

Impostare la tabindex dell'elemento tela per 1 o qualcosa di simile

<canvas tabindex='1'></canvas> 

E 'un vecchio trucco per fare qualsiasi elemento attivabile