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

javascript events keyboard

71,825

Solution 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

Solution 2

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.

71,825

kliron

My mini-bio is here, but I've been professional software developer since 1992. I live in the UK, and I am currently the CTO of LibLynx LLC Some of my popular spare time projects have included Geograph British Isles, pastebin.com. I am mainly active in php, javascript, mysql and c++ questions #SOreadytohelp

Updated on September 18, 2020

Comments

kliron over 3 years
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.
- Tim Malone almost 8 years
  
  Possible duplicate of Is it possible to focus on a <div> using javascript focus() function?
- kliron almost 8 years
  
  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.
Seppo Erviälä about 12 years

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.
Peter Bagnall about 12 years

@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
AlcubierreDrive almost 11 years

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: stackoverflow.com/a/2260788/402807
troglobit almost 8 years

Or set tabindex="-1", that will also prevent it from getting the dotted border.
jlh almost 7 years

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?
Kwebble over 6 years

This doesn't work for me in current Firefox. The browser handles the keyboard input. Same for the fiddle.
kliron over 6 years

Fiddle still works for me - if anyone can reproduce Kwebble's issue I'll update the answer...
sleeparrow over 5 years

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