Question

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

到目前为止，我想到的最简单的方法是在容器之前找到最后一个活动元素，将其聚焦然后模糊它。它会起作用吗？有更简单的方法吗？如何在容器（跨浏览器）之前找到最后一个活动元素？

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

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

Answer 1

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

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

使用以下代码测试的HTML示例：（IE，Chrome）

<div id="MyContainer">
    <div>hello</div>
    <div><span><input type="text" /></span></div>
    <div><input type="text" /></div>
</div>

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

Answer 2

向文档添加侦听器并将焦点更改为KeyUp。按下选项卡后删除侦听器：

document.onkeyup = onKeyEvent;

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

Answer 3

这是我最终使用的解决方案。我只是在容器的beginnig中创建虚假的空链接并将其聚焦。该链接将在失去焦点时被删除。

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);
};

准备将第一个活动元素聚焦在容器中

3 个答案: