0

「選択リスト」の「変更」イベントを、「マウス クリック」または「タブ プレス (つまり、フォーカスが失われた)」のように検出しようとしています。その後、この2つのアクションを基に、別のことをしたいと思っています。

詳細は次のとおりです。

テーブル行に「選択リスト」があります。ユーザーがこのリストからアイテムを選択するたびに、いくつかのコントロール (入力、選択など) が、すぐ次のテーブル行内の前述の「選択リスト」の下に動的にロードされます。

ここで私が望むのは、ユーザーがキーボードを使用して「選択リスト」からアイテムを選択し、タブを押すと、動的にレンダリングされる最初のコントロールにフォーカスが自動的に移動することです。同様に、ユーザーがマウスを使用して「選択リスト」からアイテムを選択した場合、フォーカスはどこにも移動してはなりません。

以下は、同じことを達成するための私のコードです:

$("#mySelectList").bind("change", function (e) {

var selList = $(this);

$.post("/someController/someAction", { paramOne: $(this).val() }, function (result) {

    // ..... //
    // consume "result" and load dynamic controls underneath the "select list"
    selList.closest('tr').next().find("input, select:first-child").focus(); // set focus to the next immediate control

}, 'json');

});

上記から、「タブ」を使用している間はすべて正常に機能しますが、ユーザーがマウスを使用して選択した場合、フォーカスは引き続き次の動的コントロールに移動します。これは悪いことです。ユーザーがマウスを使用してアイテムを選択する場合、「選択リスト」のみに焦点を合わせたいと思います。

また、「変更」の代わりに「キーアップ」を使用してみましたが、「選択リスト」がすぐに ajax リクエストを起動します。これは、「タブ タブ タブ」または「タブ シフト +タブタブなど」。

このシナリオを達成するためのより良い方法を知っている場合は、お知らせください。また、既存のすべてのブラウザで実行できるソリューションも期待しています。

親切な回答をお待ちしております。

前もって感謝します。

4

1 に答える 1

1

よくわかりませんが、こんな感じでしょうか。

var curFocus;

$("body *").focus(function(){ curFocus = $(this); });

$("#mySelectList").change(function(){
    var selList = $(this);

    if(curFocus[0] != selList[0]){
       $("#myOtherSelect").focus();
    }
});
于 2011-03-16T08:58:55.700 に答える