フォーカスがあるときにDIVがキー押しイベントをキャプチャしないのはなぜですか？

Question

私はjQuery 1.12を使用しています。私はフォーカスがあるときにDIVがキープレス（特に、矢印の下に）をキャプチャするようにしたい。だから私はこれに従った

$('div.select-styled').bind('keydown', function(event) { 
    console.log(event.keyCode); 
    elt = $(this).search(".select-options li:hover"); 
    console.log(elt); 
    switch(event.keyCode){ 
    // case up 
    case 38: 
     console.log(“up pressed.”) 
     break; 
    case 40: 
     console.log(“down pressed”) 
     break; 
    } 
}); 

しかし、これはキープレスをキャプチャしていません。私のフィドル - http://jsfiddle.net/cwzjL2uw/10/を見てください。 「Select State」メニューをクリックするか、「Last Name」フィールドをクリックして「Tab」をクリックして、次のDIVにフォーカスを合わせます。しかし、そのメニューにフォーカスがあるときは、キーをクリックしても上記のハンドラーはアクティブにならず、少なくともMacのChromeやFirefoxではそれが私のものではなかった。それはJavaScriptのキーボードイベントを受け取ることができます： -

任意の助けに感謝

、

Answer 1

問題は、あなたがtab押したとき.selectは、内の要素の残りの部分を保持している親であることから、焦点は、代わりに.select-styleddiv elementの.select上にある、ということです。したがって、​​を.selectにバインドする必要があります。 `.select`要素はすでに（以下私の答えにつき）` tabindex`属性を持っているので、

$(".select").on('keydown',function(event) { 
    console.log(event.keyCode); 
    elt = $(this).search(".select-options li:hover"); 
    console.log(elt); 
    switch(event.keyCode){ 
    // case up 
    case 38: 

     break; 
    case 40: 
     break; 
    } 
}); 

はここUpdated Fiddle

Answer 2

はあなた.select-styled要素tabindex属性（tabindex="1" EX）を与えます。

---

説明： .keydown()のためのjQueryのAPIは、それが唯一のフォーカス可能な要素に動作することを言及：

これは、任意の要素に取り付けることができるが、イベントだけ 要素に送られますそれは焦点があります。フォーカス可能な要素は ブラウザ間で異なる可能性がありますが、フォーム要素は常にフォーカスを取得できるため、このイベントタイプの妥当な候補は です。 、のHTMLElement上

今日のブラウザが定義フォーカス（）：このprevious Stack Overflow answerパー

、<div>要素は、デフォルトでフォーカス可能ではありませんが、DOM Level 2 HTMLは、他のルールの中で、tabindexを持つ任意の要素がフォーカスを受け取ることができると述べています

• HTMLAnchorElement/HTMLAreaElementのhref
と：それはの一つだない限り、要素は、実際にフォーカスを取らない ます
• HTMLInputElementの/ HTMLSelectElement/HTMLTextAreaElement/HTMLButtonElement ではなく、（あなたがしようとした場合、IEは実際にあなたにエラーになります）を無効にして、 、ファイルアップロードが
• セキュリティ上の理由で異常な動作を持ってHTMLIFrameElement（焦点を当て、それは便利な何もしませんが、 ）。 他の埋め込み要素も、多分、私はそれらをすべてテストしていません。
• のtabindex

---

また

を持つ任意の要素、そしてこれは、より良い練習かもしれない要素がfocus（これはあなたのjQueryを受信したとき、あなたは単に$(document)にご​​イベントハンドラをバインドすることができ既に問題なく処理しています）、blurでアンバインドします。