Захват события нажатия клавиши (или нажатия клавиши) на элементе DIV

Как перехватить событие нажатия клавиши или нажатия клавиши на элементе DIV (используя jQuery)?

Что требуется, чтобы сосредоточиться на элементе DIV?

(1) Установите tabindexатрибут:

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

(2) Привязать к keydown:

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

Чтобы установить фокус на старте:

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

Чтобы удалить - если вам это не нравится - divграницу фокуса, установите outline: noneв CSS.

Посмотрите таблицу кодов клавиш для большего количества keyCodeвозможностей.

Весь код предполагает, что вы используете jQuery.

Вот пример на простом 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>

HTML-атрибут tabindex указывает, может ли быть сфокусирован его элемент, и если / где он участвует в последовательной навигации по клавиатуре (обычно с помощью Tabклавиши). Читайте MDN Web Docs для полной справки.

Использование 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>

Использование 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>