Javascript 准备聚焦容器中的第一个活动元素

我在页面上有一个容器，应该为聚焦做好准备，即当用户按下TAB按钮时，容器中的第一个活动元素必须聚焦

到目前为止，我认为最简单的方法是找到容器之前的最后一个活动元素，聚焦它，然后模糊它。行吗？有没有更简单的方法？如何查找容器之前的最后一个活动元素（跨浏览器）

我不想更改选项卡式元素的顺序，我只想定义下一个要选择的元素

---

请使用原始javascript，而不是框架。

在文档中添加一个侦听器，并将焦点更改为keyup。按下选项卡后删除侦听器：

document.onkeyup = onKeyEvent;

function onKeyEvent (e) {
    if (e.keyCode == 9) {
       document.onkeyup = null;
       document.getElementById ('whatever').focus();
    } 
}

---

我唯一能想到的是在容器子节点上循环，并尝试聚焦它们，直到成功：

<script type="text/javascript">
document.onkeyup = function (e) {
    if (!e)
        e = window.event;
    var keyCode = e.keyCode || e.which;
    if (keyCode == 9) {
      FocusFirst(document.getElementById("MyContainer"));
    } 
}

function FocusFirst(element) {
    try {
        element.focus();
    }
    catch(ex) {}

    if (document.activeElement == element)
        return true;

    for (var i = 0; i < element.childNodes.length; i++) {
        var oChild = element.childNodes[i];
        if (FocusFirst(oChild))
            return true;
    }

    return false;
}
</script>

document.onkeyup=函数（e）{
如果（！e）
e=窗口事件；
var keyCode=e.keyCode | | e.which；
if（keyCode==9）{
FocusFirst（document.getElementById（“MyContainer”）；
} 
}
函数焦点优先（元素）{
试一试{
元素focus（）；
}
捕获（ex）{}
if（document.activeElement==元素）
返回true；
对于（var i=0；i

使用以下工具测试HTML示例：（即，Chrome）

你好

---

这将在单击选项卡时聚焦容器的第一个输入框。

这是我最后使用的解决方案。 我只是在容器的开头创建一个假空链接，并将其聚焦。链接失去焦点时将被删除

function prefocusElement(node)
{
  var fake = document.createElement("a");
  fake.setAttribute("href", "#");
  node.insertBefore(fake, node.firstChild);
  fake.focus();
  fake.addEventListener("blur", function(e) { node.removeChild(fake); }, false);
};

---

这种方法应该考虑到更多方面：用户可以按SHIFT-TAB键或使用mouse@whitered您的意思是，如果在按下tab键的同时按下SHIFT键，您不希望调用FocusFirst键？用鼠标看不到任何问题，代码只显示按键事件。是的，SHIFT+TAB，它希望选择容器之前的最后一个活动元素。当用户用鼠标聚焦一个元素，然后按TAB键时，应该聚焦下一个元素，而不是第一个。实现所有这些需求是没有问题的，但它将花费大量代码，而我的解决方案非常简短。

function prefocusElement(node)
{
  var fake = document.createElement("a");
  fake.setAttribute("href", "#");
  node.insertBefore(fake, node.firstChild);
  fake.focus();
  fake.addEventListener("blur", function(e) { node.removeChild(fake); }, false);
};