Подія натискання клавіші (або клавіші) на елементі DIV

Як ви можете зафіксувати подію клавіші або натискання клавіші на елементі DIV (за допомогою jQuery)?

Що потрібно для фокусування елемента DIV?

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

Ось приклад на звичайному 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 для повної довідки.

Використання 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>