Come posso dare il focus della tastiera a un DIV e associarvi i gestori di eventi della tastiera?

Sto creando un’applicazione in cui voglio essere in grado di fare clic su un rettangolo rappresentato da un DIV e quindi utilizzare la tastiera per spostare quel DIV elencando gli eventi da tastiera.

Anziché utilizzare un listener di eventi per quegli eventi di tastiera a livello di documento, posso ascoltare gli eventi di tastiera a livello DIV, forse dandogli il focus della tastiera?

Ecco un esempio semplificato per illustrare il problema:

    
outer
want to be able to focus this element and pick up keypresses
function onClick() { document.getElementById('inner').innerHTML="clicked"; document.getElementById('inner').focus(); } //this handler is never called function onKeypressDiv() { document.getElementById('inner').innerHTML="keypress on div"; } function onKeypressDoc() { document.getElementById('inner').innerHTML="keypress on doc"; } //install event handlers document.getElementById('inner').addEventListener("click", onClick, false); document.getElementById('inner').addEventListener("keypress", onKeypressDiv, false); document.addEventListener("keypress", onKeypressDoc, false);

Facendo clic sul DIV interno cerco di focalizzarlo, ma i successivi eventi della tastiera vengono sempre selezionati a livello di documento, non il mio listener di eventi DIV.

Devo semplicemente implementare una nozione specifica per l’applicazione della tastiera?

Dovrei aggiungere Ho solo bisogno di questo per funzionare in Firefox.

Ordinato – Ho aggiunto l’attributo tabindex al DIV di destinazione, il che gli consente di rilevare gli eventi della tastiera, ad esempio

 
this div can now have focus and recieve keyboard events

Informazioni raccolte da http://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-TECHS/SCR29.html

La risposta di Paul funziona bene, ma potresti anche usare contentEditable, come questo …

 document.getElementById('inner').contentEditable=true; document.getElementById('inner').focus(); 

Potrebbe essere preferibile in alcuni casi.