在 div 中查找任何类型的第一个可聚焦项

Question

我在 Javascript（使用 Prototype）中要求将光标聚焦在特定 div 中的第一个表单项上。

简单示例：

<form id="theForm">
  <div id="part1">
    <input id="aaa" .../>
    <select id="bbb">...</select>
  </div>
  <div id="part2">
    <select id="ccc">...</select>
    <input id="ddd" .../>
  </div>
</form>

我想编写一个 Javascript 函数，它采用 theForm 中一个 div 的名称并将光标聚焦在该 div 中的第一项上 - 例如

focusOnFirst('part1'); // will put focus on input "aaa"
focusOnFirst('part2'); // will put focus on select "ccc"

我想我也许可以像这样使用 Prototype 的 select 方法：

$(pDiv).select('input','select',...etc.);

但是，这会返回一个数组，其中包含所有输入，然后是所有选择，等等。它不会按照它们在 div 中出现的顺序返回项目。在我上面的示例中，这导致将焦点放在输入“ddd”而不是选择“ccc”。

另一种可能是Form getElements 方法：

$('theForm').getElements();

但是现在我需要检查每个返回的项目，看看它是否在所需的 div 内。目前我知道的唯一方法是获取它的所有祖先，看看是否有选定的 div。我可以这样做，但我担心这不是最有效的解决方案。

谁能提出更好的方法？

Answer 1

如何使用 CSS3 选择器：

$$('#theForm input:first-of-type')[0].focus()

它返回一个数组，即使我们知道它只会包含一个元素，所以只需抓住第一个并聚焦它。

I've worked up a quick example.

--Edit OK，我才发现它错过了选择元素。

--Edit 这似乎可行 - 选择具有name 属性的第一个元素（假设您有名称属性，可以使用其他属性）：

function focusOnFirst2(divName) {
    $$('#' + divName + ' [name]')[0].focus();
}

我已经更新了我的链接示例以包含这个以及我错误的第一次尝试。

--最后一次编辑：)

我已经采用了您的功能并尝试将其转过来，以便它根据 div 的子项而不是表单的子项进行搜索。我把它循环调用了 100 次，在 IE 中看到了大约 45% 的改进，我不确定在现实世界中它是否会更好：

function focusFirstItem (divId)
{
    if ($(divId))
    {
        var elems = $('myForm').getElements();
        var elems2 = $(divId).select('*');
        for (i=0, l=elems2.length; i<l; ++i) {
            var item = elems2[i];
            if (item.id && !item.disabled && !item.readOnly && item.visible) {
                if (elems.find(function(s){return s.id = item.id}))
                item.focus();
                break;
            }
        }
    }
}

In example page with rudimentary timing.

Answer 2

这是我迄今为止想出的：

focusFirstItem (divId)
{
    if ($(divId))
    {
        var elems = $('myForm').getElements();
        for (i=0, l=elems.length; i<l; ++i) {
            var item = $(elems[i]);
            if (!item.disabled && !item.readOnly && item.visible) {
                if (item.ancestors().find(function(s){return s.id == divId})) {
                    $(item).focus();
                    break;
                }
            }
        }
    }
}

可怕，我知道。在 IE6 上运行大约需要半秒，在 FF 上运行要好得多 70ms 左右。我知道我应该能够使用 Prototype 摆脱“for”循环，但我在尝试这样做时失败了。