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

Question

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

Что требуется для фокусировки элемента DIV?

Answer 1

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

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

(2) Привязка к клавише:

 $('#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.

#

Answer 2

tabindex Атрибут HTML указывает, можно ли сфокусировать его элемент, и если / где он участвует в последовательной навигации по клавиатуре (обычно с помощью клавиши 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>

Answer 3

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