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?

I don't understand how can you catch keyup in the element, that don't have focus.. — Igor Dymov, Jul 09 '11 at 06:55
Agreed - need to have some idea of how the user is going to interact with a non-interactive element with a keyboard. — kinakuta, Jul 09 '11 at 06:57
@kinakuta & @Igor Dymov - You can use the `tabindex` attribute to make a `div` accept focus. See my answer. — James Allardice, Jul 09 '11 at 07:01

score 80 · Accepted Answer · answered Jul 09 '11 at 06:57

80

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.

answered Jul 09 '11 at 06:57

James Allardice

164,175
21
332
312

You need `$(this).focus()` to get the jQuery object, not the DOM element. Ditto for `.blur()`. But, yes, with a tabindex attribute you then get key events. Thanks! – kbro May 03 '17 at 10:19
You, kind Sir, just made my day!!! Had given up on binding on a DIV a while back, until I came across your solution to this issue!! – Guy Park Jul 12 '18 at 10:35
1

Note: `tabindex=0` means that the element should be focusable in sequential keyboard navigation, but its order is defined by the document's source order. [(source)](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex#wikiArticle) Thus, you can assign it to multiple elements without problems. – Christopher K. Dec 04 '18 at 13:21

score 6 · Answer 2 · answered Mar 20 '16 at 11:21

6

I'm late but the correct way to ensure the proper event fire now is by using the HTML5 new attribute "contenteditable":

<div id="myEditableDiv" contenteditable="true"> txt_node </div>

classic Js mechanic can then be applied:

var el = document.getElementById('myEditableDiv');
el.addEventListener('keypress', function(e){console.log(e.target.innerText);});
el.addEventListener('keyup', function(e){console.log(e.target.innerText);});
el.addEventListener('keydown', function(e){console.log(e.target.innerText);});

answered Mar 20 '16 at 11:21

Smithfield

341
4
11

1

Why would you make the div editable? By setting `contenteditable=true`, the text inside the div becomes editable. I don't think you want to do that just to get the keyboard events to work. – CookieEater Mar 31 '21 at 23:08
The question isn't how to make a `div` editable – Drenai Apr 30 '22 at 17:36

score 2 · Answer 3 · answered Jul 09 '11 at 07:03

Interesting question. (Here another for you, how to know the div has focus?) As I can see, your div is a popup (its id is dialog). Here you have a workaround:

On popup open:

$("div#modal").data("isOpen", true);

On poup close:

$("div#modal").data("isOpen", false);

Then, the binding:

$('body').keyup(function(e){  //Binding to body (it accepts key events)
   if($("div#modal").data("isOpen")){  //Means we're in the dialog
       if (e.keyCode == 13) //This keyup would be in the div dialog
       {
          $('#next').click(); // Mimicking mouse click to go to the next level.
       }
   }
});

This way, we're mimicking keyup event on the div. Hope this helps. Cheers

PS: Note that you can use #dialog instead of div#dialog

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

3 Answers3

Linked