How do I capture a key press (or keydown) event on a div element?

(1) Set the tabindex attribute:

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

(2) Bind to keydown:

 $('#mydiv').on('keydown', function(event) {
       //....your actions for the keys .....

To set the focus on start:

$(function() {

To remove – if you don’t like it – the div focus border, set outline: none in the CSS.

See the table of keycodes for more keyCode possibilities.

All of the code assuming you use jQuery.


Leave a Comment