Capture key press (or keydown) event on DIV element

javascript jquery html scripting keypress

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

javascript jquery html scripting keypress

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>

Expand snippet