Home/ Questions/Q 50659
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-10T16:37:41+00:00

I am building an application where I want to be able to click a

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. 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 </div>

    Information gleaned from http://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-TECHS/SCR29.html

    • 0