How to grab keyboard events on an element which doesn't accept focus?

Question

I know that for handling keyboard events in an input field you can use:

$('input').keyup(function(e){ var code = e.keyCode // and 13 is the keyCode for Enter }); 

But, now, I have some div and li elements, and I don't have a form element, and none of my elements are considered to be form elements and none of them accept focus or tab and stuff like that.

But now I need to handle the keyup (or keydown, or keypress, doesn't matter) event in a div element. I tried:

$('div#modal').keyup(function(e){    if (e.keyCode == 13)    {       $('#next').click(); // Mimicking mouse click to go to the next level.    } }); 

But the problem is, it doesn't work. What should I do?

Answer 1

A div by default cannot be given focus. However, you can change that by adding a tabindex attribute to the div:

<div tabindex="0" id="example"></div> 

You can then give the div focus, and also blur it with the hover event:

$("#example").hover(function() {     this.focus(); }, function() {     this.blur(); }).keydown(function(e) {     alert(e.keyCode); }); 

When the div has focus, it will accept keyboard events. You can see an example of this working here.