How to bind keyboard events to div elements?

Question

Is there a way to listen to keyboard events on a DIV element?

My code:

​<div id="div" style="height:50px" class="ui-widget-content"></div>
<input id="input">​​​​​​​​​​​​​​

​$('#div,#input').keyup(function(event){
    console.log(event.keyCode);
});​​​​​​

Actually, the code triggers only for the input, can I handle it for the div?

Answer 1

You can add a tabindex in that div to catch keyboard events like this

<div id="div" style="height:50px" class="ui-widget-content" tabindex="0"></div>

Like answered here.

Working Fiddle

Reference

Answer 2

Add a tabindex and it should work

<div id="div" style="height:50px;" class="ui-widget-content" tabindex="1"></div>

DEMO