How can I use a 'keydown' event listener on a div?

Question

I am trying to capture keydown events where specific keys correspond to specific audio clips to be played. I've been searching but I am stumped. It seems that the keydown event is only available in the window/document object. Is this correct? Ive seen some talk of jQuery plugins, although i would like to stay away from jQuery. Vanilla JS is ideal.

I have 2 DIVS that I want to listen for keydown events on at the same time. Based on which keys are pressed, the function plays the corresponding audio clip.

Thank you!

Welcome to StackOverflow! Consider doing some more research and refining your question to address a *specific* issue, as it's currently a bit too broad. Per [**What topics can I ask about here?**](https://stackoverflow.com/help/on-topic) - *"Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it."* — Tyler Roper, Jul 10 '18 at 14:07
As you might have valid reasons to stay away from jQuery. I still would like to say that jQuery is a great addition to traditional java script. It has a lot of advantages that you can't do better yourself with traditional java script. (Sorry got triggered by "Vanilla JS is ideal") — Mark Baijens, Jul 10 '18 at 14:40
gotcha. no problem, I only say that cause I am focused on learning javascript in itself. i dont want to fall into the allure of jquery is easier so just do it that way. I want to understand the process on a fundamental level. — rabbitwerks, Jul 10 '18 at 19:07

Unmitigated · Accepted Answer · 2020-07-22T02:30:54.547

Give the div a tabindex, so it will be focusable. In your case, a tabindex of -1 would be best as it would allow the element to be focused but remain inaccessible by the tab key.

The tabindex global attribute indicates if its element can be focused, and if/where it participates in sequential keyboard navigation (usually with the Tab key, hence the name).

A negative value (usually tabindex="-1") means that the element should be focusable, but should not be reachable via sequential keyboard navigation. It's mostly useful to create accessible widgets with JavaScript.

You can then add a keydown event listener to the element and check for the keyCode of the event.

document.getElementById("someId").addEventListener("keydown", function(event){
    //do something on keydown
    if(event.keyCode==13){
     //enter key was pressed
    }
    if (event.keyCode >= 65 && event.keyCode <= 90){
       //input was a-z
    }
});

This worked very well for me so far. Thank you! It makes sense to use conditionals to specify significance of the keys. that way I only have to use the keydown on the window object. — rabbitwerks, Jul 10 '18 at 19:09

Andrei Nemes · Answer 2 · 2018-07-10T14:10:26.023

9

You can allow an element to receive focus by giving it a tab index.

<div tabindex="-1"></div>

As long as it's in focus key events should be captured on it.

If you want the element to be focusable using the Tab key, give it an index greater than -1.

Simple example

edited Jul 10 '18 at 14:10

answered Jul 10 '18 at 14:04

Andrei Nemes

3,062
1
16
22

1

Ah that makes sense. So can you only have one keydown event active at a time because the event element needs to be in focus? – rabbitwerks Jul 10 '18 at 14:17
Unless an event is cancelled, parent elements will still be notified. This means you can also capture the event within `document.body` or `window`. You can read more about it here https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture – Andrei Nemes Jul 10 '18 at 14:20

How can I use a 'keydown' event listener on a div?

2 Answers2

Linked