web-dev-qa-db-ja.com

フォーカスを受け入れない要素でキーボードイベントを取得するにはどうすればよいですか？

入力フィールドでキーボードイベントを処理するには、次のものを使用できることを知っています。

$('input').keyup(function(e){
var code = e.keyCode // and 13 is the keyCode for Enter
});

しかし、現在、いくつかのdiv要素とli要素があり、form要素はありません。また、私の要素はいずれもフォーム要素とは見なされず、それらの中でfocusまたはtabなどを受け入れます。

しかし今、私はdiv要素でkeyup（またはkeydown、またはkeypressは関係ありません）イベントを処理する必要があります。私は試した：

$('div#modal').keyup(function(e){
   if (e.keyCode == 13)
   {
      $('#next').click(); // Mimicking mouse click to go to the next level.
   }
});

しかし、問題は、それが機能しないことです。私は何をすべきか？

javascriptjquerykeyboardkeyboard-events
23
Saeed Neamati

デフォルトでは、divにフォーカスを与えることはできません。ただし、tabindex属性をdivに追加することで、これを変更できます。

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

次に、divフォーカスを与え、hoverイベントでぼかします。

$("#example").hover(function() {
    this.focus();
}, function() {
    this.blur();
}).keydown(function(e) {
    alert(e.keyCode);
});

divにフォーカスがある場合、キーボードイベントを受け入れます。この動作の例を見ることができます ここ 。

57
James Allardice

遅れていますが、適切なイベントが発生するようにする正しい方法は、HTML5の新しい属性「contenteditable」を使用することです。

<div id="myEditableDiv" contenteditable="true"> txt_node </div>

次に、古典的なJsメカニズムを適用できます。

var el = document.getElementById('myEditableDiv');
el.addEventListener('keypress', function(e){console.log(e.target.innerText);});
el.addEventListener('keyup', function(e){console.log(e.target.innerText);});
el.addEventListener('keydown', function(e){console.log(e.target.innerText);});
6
Smithfield

興味深い質問です。 （もう1つ、divにフォーカスがあることを確認する方法はありますか？）ご覧のとおり、divはポップアップです（IDはdialogです）。ここに回避策があります：

ポップアップを開くと：

$("div#modal").data("isOpen", true);

Poup close：

$("div#modal").data("isOpen", false);

次に、バインディング：

$('body').keyup(function(e){  //Binding to body (it accepts key events)
   if($("div#modal").data("isOpen")){  //Means we're in the dialog
       if (e.keyCode == 13) //This keyup would be in the div dialog
       {
          $('#next').click(); // Mimicking mouse click to go to the next level.
       }
   }
});

このように、divでのキーアップイベントを模倣しています。お役に立てれば。乾杯

PS：#dialogの代わりにdiv#dialogを使用できることに注意してください

1
Edgar Villegas Alvarado