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?

Possible duplicate of http://stackoverflow.com/questions/148361/how-can-i-give-keyboard-focus-to-a-div-and-attach-keyboard-event-handlers-to-it/148444#148444 as mentioned in one of the answers.. — Selvakumar Arumugam, May 23 '12 at 15:02
Does this answer your question? [How can I give keyboard focus to a DIV and attach keyboard event handlers to it?](https://stackoverflow.com/questions/148361/how-can-i-give-keyboard-focus-to-a-div-and-attach-keyboard-event-handlers-to-it) — mikemaccana, Mar 24 '21 at 15:48

score 51 · Accepted Answer · edited May 23 '17 at 11:46

51

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

edited May 23 '17 at 11:46

Community

1
1

answered May 23 '12 at 15:00

Prasenjit Kumar Nag

13,391
3
45
57

1

Oh maen, you saved my day! I was looking a few days now for an solution. Many thanks! – Meister Schnitzel May 15 '13 at 10:53

score 5 · Answer 2 · answered May 23 '12 at 15:01

5

Add a tabindex and it should work

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

DEMO

answered May 23 '12 at 15:01

Selvakumar Arumugam

79,297
15
120
134

score 2 · Answer 3 · answered May 23 '12 at 15:02

2

you need to add a tabindex to the div.

see this fiddle:

http://jsfiddle.net/w2Y4d/1/

answered May 23 '12 at 15:02

mkoryak

57,086
61
201
257

score 0 · Answer 4 · answered May 23 '12 at 15:01

0

Why not place the input inside the div and then simply find $('#input').closest('div') ?

Otherwise, if your example is a pattern of how your inputs relate to your divs then simply $('#input').prev() ?

answered May 23 '12 at 15:01

Brian Scott

9,221
6
47
68

How to bind keyboard events to div elements?

4 Answers4

Linked