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?

Solution 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.

Solution 2

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);});

Solution 3

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

Comments

[kbro]

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!

[Guy Park]

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!!

[Christopher K.]

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) Thus, you can assign it to multiple elements without problems.

[CookieEater]

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.

[Drenai]

The question isn't how to make a div editable