Capture key press (or keydown) event on DIV element

Question

How do you trap the keypress or key down event on a DIV element (using jQuery)?

What is required to give the DIV element focus?

Solution 1

(1) Set the tabindex attribute:

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

(2) Bind to keydown:

 $('#mydiv').on('keydown', function(event) {
    //console.log(event.keyCode);
    switch(event.keyCode){
       //....your actions for the keys .....
    }
 });

To set the focus on start:

$(function() {
   $('#mydiv').focus();
});

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.

Solution 2

Here example on plain JS:

document.querySelector('#myDiv').addEventListener('keyup', function (e) {
  console.log(e.key)
})

#myDiv {
  outline: none;
}

<div 
  id="myDiv"
  tabindex="0"
>
  Press me and start typing
</div>

Solution 3

tabindex HTML attribute indicates if its element can be focused, and if/where it participates in sequential keyboard navigation (usually with the Tab key). Read MDN Web Docs for full reference.

Using Jquery

$( "#division" ).keydown(function(evt) {
    evt = evt || window.event;
    console.log("keydown: " + evt.keyCode);
});

#division {
  width: 90px;
  height: 30px;
  background: lightgrey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

Using JavaScript

var el = document.getElementById("division");

el.onkeydown = function(evt) {
    evt = evt || window.event;
    console.log("keydown: " + evt.keyCode);
};

#division {
  width: 90px;
  height: 30px;
  background: lightgrey;
}

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

Comments

[Jonathon Faust]

What does "focus" mean for a div?

[Brendan Enrick]

jboyd other than tabbing to it when it has a tabindex, you can use javascript to find it and call the focus method on it.

[helle]

@Lalchand ... can you accept my answer somewhen? :)

[Jukka Dahlbom]

+1 tabindex is the key point here to make the div 'selectable'. JQuery not necessary, the same thing works with Angular as well as (I suppose) with plain javascript events.

[knownasilya]

What's the browser support for this?

[zonabi]

tabindex is a key part, but do not set it to any value other than "0". Making it anything above 0 is going to mess up screen readers for visually impaired users (it will skip everything on the page and go straight to any tabindex above 0). tabindex="0" makes it "tabbable." you can have infinite elements with tabindex="0"

[dfmiller]

Works with <pre> as well!

[Vinícius Negrão]

Excellent! I was missing the tabindex attribute, maybe because DIV's can't receive focus unless they have a tabindex. Thanks man! Saved my life! EDIT: works with React as well

[MikeT]

i actually found this looking for an issue with the focusout event firing when the controls on the div lost focus say to click on the divs scrollbar , simply adding the tabstop to the div was the fix, so thank you so much

[Mohamad Hamouday]

As of jQuery 3.0, .bind() has been deprecated. It's should use .on('keydown',.. instead off .bind('keydownm.. api.jquery.com/bind

[jlh]

It's worth noting that while keydown works just fine, keypress does not. (At least in my situation with an <li> on Chrome.)

[Jonah]

One helle of a good answer!