私のスタイリングされたDIVにフォーカスがあるとき、どのようにキー押しをキャプチャするのですか？

Question

私はjQuery 1.12を使用しています。私は私のページにいくつかのスタイルの選択メニューを持っています。アクティブになっているときは、「Tab」を押してから次のスタイルの選択メニューにフォーカスを移すことができます。私はこれを試しています

return $('div.select-styled:first').keydown(function(e) { 
    alert("key pressed"); 
    if (e.which === 9) { 
    $('div.select-styled.active').each(function() { 
     return $(this).removeClass('active').next('ul.select-options').hide(); 
    }); 
    return $('div.select-styled:second').focus().click(); 
    } 
}); 

何も起きていません。私のフィドルから見ることができます - http://jsfiddle.net/cwzjL2uw/5/、あなたは姓のフィールドで "Tab"をクリックすることができ、最初のスタイルの選択メニューがアクティブになりますが、その後、 "Tab"を2回クリックすると何もしません。どのように私のスタイル選択メニューからkeypressイベントをキャプチャするのですか？

Answer 1

スタイル指定されたselect要素は、div要素を使用して実装されます。div要素は、tabindex属性を持たない限りフォーカスを取得できません。要素をフォーカス可能にする場合は、tabindexを-1に設定できます。あなたのコードの場合

、wrapperは、次のように設定することができます。

var $wrapper = $("<div />", { 
    'class': "select", 
    'tabindex': '-1' 
}) 

次に、あなたのコードは、あなたの期待として動作する可能性があります。

しかし、タブのフォーカスではなく、タブキーイベントに耳を傾け、あなたが focusへとblurイベントを聞いて、あなたのコントロールの表示を更新する必要があることを意味しborwserが提供する基本的な機能は、すでにあります。この場合、tabindexを1に設定し、イベントハンドラを追加する必要があります。 次に、フォーカスの喪失を検出するために、​​イベントリスナーとリスナーbodyを削除できます。ここで

は、あなたがチェックすることができ、更新フィドルです： JS Fiddle

も参照してください：

• Which HTML elements can receive focus?
• Some best practice about tabindex