Question

我想将焦点放在div中的第一个表单元素上，或者使用Prototype给我的东西，或者使用普通的javascript。我有一个包含表单元素的div的引用。我不知道第一个表单元素是<input>，<select>还是<textarea>节点。

我想做这样的事情：

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

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

这周围有优雅的方式吗？我想我可以得到父div的所有后代，然后遍历每一个查找其中一个节点，但我怀疑在原型中可能有一种很酷的方法来做这个。

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

谢谢！

Answer 1

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

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

我会将您的表单替换为document.forms[0]

Prototype在focusFirstElement类上也有Form的方法，但我无法使用它，因为我加载的某些页面没有表单。您可以只拨打Form.focusFirstElement($(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();

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

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

2 个答案: