如何选择第一个子表单元素（使用原型）？答案

【问题标题】：How to select the first child form element (using prototype)?如何选择第一个子表单元素（使用原型）？
【发布时间】：2009-03-13 18:58:05
【问题描述】：

我想将焦点设置在 div 中的第一个表单元素上，可以使用 Prototype 提供的内容，也可以使用普通的 javascript。我有一个包含表单元素的 div 的引用。我不知道第一个表单元素是<input>、<select> 还是<textarea> 节点。

我想做这样的事情：

$('parentDiv').down('textarea, select, input').focus();

然而，Element.down 方法似乎选择了第一个 textarea 节点，即使在 textarea 之前有一个输入节点。

有没有一种优雅的方法来解决这个问题？我想我可以得到父 div 的所有后代，然后遍历每一个寻找这些节点之一，但我怀疑在原型中可能有一种很酷的方法来做到这一点。

我不能使用 Form 对象的方法，因为这个父 div 只是表单的一部分。它是通过 AJAX 调用添加到页面中的，因此当 div 已添加到 DOM 时，我想将焦点设置在新添加的集合中的第一个字段上（很可能不是整个表单中的第一个字段） .

谢谢！

【问题讨论】：

标签： javascript prototypejs

【解决方案1】：

当我使用原型时，我确信我做了类似的事情。

var firstElement = Form.findFirstElement(document.forms[0]);
if(firstElement !=null)
    firstElement.activate();

我会用你的表格代替document.forms[0]

Prototype 在Form 类上也有focusFirstElement 的方法，但我不能使用它，因为我要加载的某些页面没有表单。您或许可以直接拨打 Form.focusFirstElement($(form)); 或类似的变体。

编辑：
我认为您可以在不同类型的元素上使用 Form 扩展，但它似乎不起作用，但是您可以从 Form 中获取一些内容并直接应用它。以下代码应该可以按您的意愿工作。

var firstElement = Form.getElements($("parentDiv")).find(function(element) {
    return element.type != 'hidden' && !element.disabled &&
    ['input', 'select', 'textarea'].include(element.tagName.toLowerCase());
});
if(firstElement != null)
    firstElement.activate();

【讨论】：

这种方法的问题是我不想将焦点设置在表单中的第一个字段，而是表单中 div 中的第一个字段。我在问题中添加了关于这一点的说明。

【解决方案2】：

完全与 pkeading 有相同的问题 - 可以确认 Quintin Robinson 的编辑答案可以很好地满足 pkeading 的要求

2 个注释：

$("parentDiv")需要引用包含表单元素的div

如果您使用 scriptaculous 效果打开带有“子表单”的 div，那么您需要在效果中的 afterFinish 函数中运行代码：

Effect.BlindDown(*YourDiv*,{
    duration:0.5,
    afterFinish: function() {
        var ff1=Form.getElements($(*YourDiv*)).find(
                function(element){
                   return element.type != 'hidden' && !element.disabled && ['input', 'select', 'textarea'].include(element.tagName.toLowerCase())
                }
        );
        if(ff1 != null) ff1.activate();
    }
});

【讨论】：