0

我正在尝试检测“选择列表”的“更改”事件，就像来自“鼠标单击”或“标签按下（即焦点丢失）”一样。此后，我想根据这两个动作做不同的事情。

深入分析如下：

我在表格行中有一个“选择列表”。每当用户从该列表中选择一个项目时，一些控件（输入、选择等）会在紧邻的下一个表格行内的所述“选择列表”下方动态加载。

我从这里想要的是，如果用户通过键盘从“选择列表”中选择某个项目并按 Tab，则焦点应自动转移到动态呈现的第一个控件。同样，如果用户使用鼠标从“选择列表”中选择一个项目，则焦点不应移动到任何地方。

下面是我实现相同的代码：

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

});

从上面可以看出，使用“选项卡”时一切正常，但如果用户使用鼠标进行选择，焦点仍会移动到下一个不好的动态控件。如果用户使用鼠标选择一个项目，我只想专注于“选择列表”。

我还尝试使用“keyup”代替“change”，但这会导致“选择列表”立即触发 ajax 请求，这是在通过控件导航时出现不必要的 ajax 请求的问题，例如使用“tab tab tab”或“tab shift+选项卡选项卡等”。

如果你们知道实现这种情况的更好方法，请告诉我。我也期待在每个现有浏览器下运行的可能解决方案。

期待您的友好回复。

提前致谢。

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 回答