10

私たちは現在、Chosen ドロップダウン プラグインを使用しています。単一のドロップダウンを使用している場合、「選択した」コントロールにタブ移動すると、実際のドロップダウン部分は表示されません。ただし、プラグインを複数の「選択」に適用すると表示されます。

ドキュメントと GitHub の問題を調べてみると、タブの順序とフォーカスに関して多くの言及があるようですが、一見単純な要件を扱っているようには見えません。タブ移動時にフォーカスを受け取ったときにドロップダウンを表示します。

この機能がプラグインの一部ではないと仮定すると、アンカー タグのフォーカスをキャプチャするなどの代替手段はありますか? 

$('.chzn-single').focus(function(e){
    alert('I should be focused!')
});

これまでのところ、私は成功しておらず、他の人がこの問題を経験したかどうか疑問に思っていました. 問題を示すこのjsfiddleをチェックアウトできます

4

1 に答える 1

8

  1. アンカー要素ではなく、選択したコンテナ内にある検索入力のフォーカス イベントを追跡し、選択したコンテナの mousedown イベントをトリガーする必要があります。これは、ドロップダウンを開くときにリッスンするイベントです。

  2. 動的に追加された要素にイベント ハンドラーをバインドするには、委任されたイベント アプローチを使用する必要があります (jquery 1.7.1 以前では、'live' メソッドを使用するだけでかまいません)。

  3. 再帰呼び出しを避けるために、コンテナーが現在アクティブであるかどうかも確認する必要があります (選択したドロップダウンが開かれると、検索入力が再びフォーカスされます)。

$('body').on('focus', '.chzn-container-single input', function() {
    if (!$(this).closest('.chzn-container').hasClass('chzn-container-active'))
        $(this).closest('.chzn-container').trigger('mousedown');
        //または代わりにこれを使用
        //$('#select').trigger('listzt:open');  
});

これがjsfiddleの作業です

代わりに、$(this).closest('.chzn-container').trigger('mousedown'); プラグインの内部イベントをトリガーすることもできます:$('#select').trigger('liszt:open');

于 2013-06-03T13:19:59.420 に答える