DIV要素でのキープレス（またはキーダウン）イベントのキャプチャ

（jQueryを使用して）DIV要素のkeypressまたはkey downイベントをどのようにトラップしますか？

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: noneCSS で設定します。

その他の可能性については、キーコードの表を参照してください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>

tabindex HTML属性は、その要素にフォーカスできるかどうか、および（通常はTabキーを使用して）順次キーボードナビゲーションに参加するかどうか/場所を示します。MDN Webドキュメントを読む完全なリファレンスについては、をください。

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>