87

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.

Paul Dixon
  • 295,876
  • 54
  • 310
  • 348
  • Possible duplicate of [Is it possible to focus on a
    using javascript focus() function?](http://stackoverflow.com/questions/3656467/is-it-possible-to-focus-on-a-div-using-javascript-focus-function)
     – Tim Malone Jul 06 '16 at 04:39
  • 1
    Not really a dupe - it asked some two years prior, and this is asking how to receive keyboard events on arbitrary elements, rather than using the `focus()` function. – Paul Dixon Jul 07 '16 at 14:50

2 Answers2

176

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

Paul Dixon
  • 295,876
  • 54
  • 310
  • 348
  • 7
    Also, if you don't want the div to get a dotted blue border when it's focused, you can style it `outline: 0px solid tranparent;`. See: http://stackoverflow.com/a/2260788/402807 – AlcubierreDrive Jul 01 '13 at 21:18
  • 5
    Or set `tabindex="-1"`, that will also prevent it from getting the dotted border. – troglobit Jul 11 '16 at 19:26
  • I can't get this to work at all in Chrome 60 and FF 54. And IE11 magically does the right thing even without the `tabindex`. Is this answer outdated? – jlh Aug 09 '17 at 09:29
  • This doesn't work for me in current Firefox. The browser handles the keyboard input. Same for the fiddle. – Kwebble Nov 28 '17 at 08:09
  • Fiddle still works for me - if anyone can reproduce Kwebble's issue I'll update the answer... – Paul Dixon Nov 28 '17 at 15:19
  • 1
    getting rid of the `outline` is not accessible. if you don't like the way it looks, i recommend giving some other visual indication that the element is focused before getting rid of the `outline` – sleeparrow Sep 11 '18 at 19:15
  • I just solved this the same way independently - so it's still relevant, at least in Chrome. – s6mike Oct 09 '22 at 14:04
6

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

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

Might be preferable in some cases.

Peter Bagnall
  • 1,794
  • 18
  • 22
  • 6
    If you do this Chrome 17 puts a cursor on the element on focus and you can type stuff on the element. I wouldn't recommend this. – Seppo Erviälä Feb 22 '12 at 13:24
  • 1
    @Seppo, that's a good point. If you're consuming the keyboard events then you wouldn't necessarily be able to edit, but having a cursor might be messy depending what you're trying to do. Incidentally, it's not just Chrome 17, but pretty much all recent browsers which behave this way - certainly FF and Safari - IE too I believe, although I've not tested in that lately – Peter Bagnall Apr 14 '12 at 06:47