Edit Question - KnowledgeHub

Title Body

I am building an application where I want to be able to click a rectangle represented by a DIV, and then use the keyboard to move that DIV by listing for keyboard events. Rather than using an event listener for those keyboard events at the document level, can I listen for keyboard events at the DIV level, perhaps by giving it keyboard focus? Here's a simplified sample to illustrate the problem: <html> <head> </head> <body> <div id="outer" style="background-color:#eeeeee;padding:10px"> outer <div id="inner" style="background-color:#bbbbbb;width:50%;margin:10px;padding:10px;"> want to be able to focus this element and pick up keypresses </div> </div> <script language="Javascript"> 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); </script> </body> </html> On clicking the inner DIV I try to give it focus, but subsequent keyboard events are always picked up at the document level, not my DIV level event listener. Do I simply need to implement an application-specific notion of keyboard focus? I should add I only need this to work in Firefox.

Tags (comma-separated) Cancel