How can I give keyboard focus to a DIV and attach keyboard event handlers to it?

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:


<div id="outer" style="background-color:#eeeeee;padding:10px">

   <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

<script language="Javascript">

function onClick()


//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);



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.



Sorted - I added tabindex attribute to the target DIV, which causes it to pick up keyboard events, for example

<div id="inner" tabindex="0">
    this div can now have focus and receive keyboard events

Information gleaned from


Paul's answer works fine, but you could also use contentEditable, like this...


Might be preferable in some cases.


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.