Question

I’m trying to detect “change” event for a “select list” as if from a “mouse click” or from a “tab press (i.e. focus lost)”. Thereafter, I want to do different things based upon these two actions.

In depth, it is as follows :

I have a “select list” in a table row. Whenever a user selects an item from this list, some controls (inputs, selects and so on) loads dynamically underneath the said “select list” inside the immediate next table row.

What I want from here, is that if user selects some item from the “select list” through keyboard and press tab, the focus should automatically be shifted to the very first control that is rendered dynamically. Similarly, if the user selects an item from the “select list” using mouse, the focus should not move anywhere.

Below is my code to achieve the same :

$("#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');

});

From the above, everything works fine while using “tab” but if user selects from using the mouse, the focus still moves to the next dynamic control which is bad. I want to keep focus only on the “select list” if user uses mouse to choose an item.

I also tried using “keyup” in place of “change” but that causes “select list” to fire rightaway ajax requests which is problem in terms of unnecessary ajax request while navigating through controls say using “tab tab tab” or “tab shift+tab tab and so on”.

Kindly let me know if you guys know a better way to achieve this scenario. I also look forward for a possible solution to run under every existing browser.

Looking forward to your kind replies.

Thanks in advance.

Answer 1

Not sure I understand exactly, but what about something like this?

var curFocus;

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

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

    if(curFocus[0] != selList[0]){
       $("#myOtherSelect").focus();
    }
});