web-dev-qa-db-ja.com

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

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

DIV要素にフォーカスを与えるには何が必要ですか？

javascriptjqueryhtmlscriptingkeypress
129
Lalchand

（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フォーカス境界線を、CSSでoutline: noneに設定します。

keyCodeの可能性については、 keycodes の表を参照してください。

JQueryを使用すると仮定したすべてのコード。

268
helle

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>
5
nkshio

プレーン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>
3
Илья Зеленько