addEventListener per keydown su Canvas

Sto cercando di creare un’app canvas che risponda all’input della tastiera e del 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’avviso ‘mousedown’ viene visualizzato ogni volta che clicco il mouse, ma l’avviso ‘keydown’ non viene mai visualizzato. Lo stesso codice funziona bene su JS Bin: http://jsbin.com/uteha3/66/

Perché non sta funzionando sulla mia pagina? La canvas non riconosce l’input da tastiera?

Modifica – Questa risposta è una soluzione, ma un approccio molto più semplice e corretto sarebbe l’impostazione dell’attributo tabindex sull’elemento canvas (come suggerito da hobberwickey).

Non è ansible mettere a fuoco un elemento canvas. 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

Imposta il tabindex dell’elemento canvas su 1 o qualcosa di simile

  

È un vecchio trucco per rendere qualsiasi elemento focalizzabile