Wie wählt man das erste untergeordnete Formularelement (mit Hilfe des Prototyps)?

Question

Ich möchte Fokus auf das erste Formularelement in einem div, entweder mit etwas, das Prototype gibt mir, oder einfach JavaScript. Ich habe einen Verweis auf ein div, das die Formularelemente enthält. Ich weiß nicht, ob das erste Formularelement ein <input>, <select> oder <textarea> Knoten sein wird.

Ich mag so etwas wie dies zu tun:

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

jedoch die Element.down Methode scheint den ersten TextArea- Knoten zu holen, obwohl es ein Eingangsknoten vor dem Text.

Gibt es einen eleganten Weg dazu? Ich nehme an, ich könnte alle Nachkommen des Eltern-Divs bekommen, und dann iterieren über jede Suche nach einem dieser Knoten, aber ich vermute, dass es eine coole Möglichkeit gibt, dies im Prototyp zu tun.

Ich kann die Methoden des Form-Objekts nicht verwenden, da dieses übergeordnete div nur Teil des Formulars ist. Es wird der Seite über einen AJAX-Aufruf hinzugefügt. Wenn das div zum DOM hinzugefügt wurde, möchte ich den Fokus auf das erste Feld in der neu hinzugefügten Menge legen (was höchstwahrscheinlich nicht das erste Feld im gesamten Formular ist). .

Danke!

Answer 1

Wenn ich Prototyp verwendete, bin ich mir sicher, dass ich so etwas gemacht habe.

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

würde ich Ihre Form für document.forms[0]

ersetzen Prototyp hat auch die Methode der focusFirstElement auf der Form Klasse, aber ich konnte nicht, weil einige Seiten verwenden, die ich laden würde Formulare nicht haben. Sie können möglicherweise Form.focusFirstElement($(form)); oder eine ähnliche Variante aufrufen.

Bearbeiten:
Ich dachte, Sie könnten die Formularerweiterungen für verschiedene Arten von Elementen verwenden, aber es scheint nicht zu funktionieren, aber Sie können etwas aus Form nehmen und direkt anwenden. Der folgende Code sollte so funktionieren, wie Sie es beabsichtigen.

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

Hatte genau die gleiche Frage wie pkeading - kann Quintin Robinson bearbeitet Antwort für feine Arbeiten bestätigen, was pkeading will

2 Anmerkungen:

1. $("parentDiv") Anforderungen an die div beziehen enthält die Formularelemente

2. Wenn Sie Scriptaculous-Effekt verwenden s zu öffnen, die div mit dem „Unterformular“ bis dann müssen Sie den Code innerhalb einer afterFinish Funktion in der Wirkung auszuführen:

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