jQuery Dynamisch auf den ersten INPUT oder Textbereich fokussieren

Question

Hier ist ein schwieriger Start in den Morgen.

Ich habe eine Reihe von Symbolen. Wenn Sie auf ein Symbol klicken, wird ein Formular geladen. Einige der Formulare haben Eingabe [Text] andere haben Textareas.

Was ich versuche zu finden ist jQuery, dass sobald ich das Formular lade ich das ausführen werde ... Konzentrieren Sie sich auf die erste Eingabe oder Textfeld, was auch immer es sein mag, dynamisch, so brauche ich nicht wenn Blöcke.

Ideen?

Answer 1

Dies sollte es tun denke ich

$("#formId input:text, #formId textarea").first().focus(); 

Answer 2

EDIT

Dies ist das eigentlich nicht groß von einer Lösung. Die Lösungen von Patricia und Onkelborg sind viel eleganter.

var $firstInput = jQuery("input:first"); 
var $firstTextArea = jQuery("textarea:first"); 

if(firstInput.length == 0) { 
    $firstTextArea.focus(); 
} 

else { 
    $firstInput.focus(); 
} 

Answer 3

einige Ihrer Code wäre nett .. aber das sollte einfach sein.

vorausgesetzt, Ihr Laden Sie Ihre für in ein div, die Sie kennen die ID ....

alles, was Sie tun müssen, ist so etwas wie

$('#TheIdOfYourFormDiv').find('input, textarea').first().focus() 

, nachdem Sie das Formular

geladen haben

Answer 4

$(":input:first").focus(); 

Der Selektor :input erfasst alle Eingabe-, Textbereich-, Auswahl- und Schaltflächenelemente.

Answer 5

Hier ist sie:

$('#form-id :input:enabled:visible:first').focus(); 

# Form-id ist ID der Form; : Eingang wählt ein beliebiges Eingabe- und Textfeldelement; : aktiviert stellt sicher, dass die Eingabe editierbar ist; : viisble stellt sicher, dass das Element sichtbar ist; : erste ist offensichtlich

Answer 6

Es funktioniert für mich in der Last Ereignis.

$('#Div').find('input:first').focus(); 

Answer 7

Denn: sichtbar ist eine Erweiterung jQuery und nicht Teil der CSS-Spezifikation , Abfragen mit: sichtbar können nicht die Vorteile der Leistungssteigerung durch den nativen DOM querySelectorAll() Verfahren bereitgestellt nehmen. Um die beste Leistung zu erzielen, wenn Sie: auswählen, selektieren Sie zunächst die Elemente mit einem reinen CSS-Selektor, dann verwenden Sie .filter (": visible").

Verwenden statt:

$('form').filter(':input:first').focus(); 

oder:

$('input').first().focus(); //as shown in the "correct" answer. 

auch bedenken, wenn .focus()

Der Versuch, mit Fokus auf ein verborgenes Element zu setzen, wird ein Fehler in Internet Explorer. Achten Sie darauf, nur .focus() auf Elemente zu verwenden, die sichtbar sind. Um Fokus-Ereignishandler eines Elements auszuführen, ohne Fokus auf das Element festzulegen, verwenden Sie .triggerHandler ("Fokus") statt .focus().

Answer 8

Hier ist meine Lösung. Der Code sollte leicht genug sein, zu folgen, aber hier ist die Idee:

• erhalten alle Eingänge, wählt und Textbereiche
• ausfiltern alle Tasten und versteckte Felder
• Filter nur dann aktiviert, sichtbare Felder
• wählt das ausgewählte Feld, um den ersten
• Fokus

Der Code:

Rufen Sie dann einfach focusFirst mit Ihrem übergeordneten Element oder Selektor auf.

Selector:

focusFirst('#parentId'); 

Element:

var el = $('#parentId'); 
focusFirst(el); 

Answer 9

Hier ist eine Lösung für Bootstrap modals obendrein von @craztmatt und anderen entwickelt. Ich habe erweitert, um die Auswahl des Zielelements bei dem Modal zu starten, das das Ereignis ausgelöst hat. Dieser fängt Eingaben ab, Textarea UND wählt Elemente aus.

// do this to make bootstrap modals auto-focus. 
// delegate to body so that we only have to set it up once. 
$('body').on('shown.bs.modal', function (e) { 
    var ele = $(e.target).find('input[type=text],textarea,select').filter(':visible:first'); // find the first input on the bs modal 
    if (ele) {ele.focus();} // if we found one then set focus. 
}) 

Nicht gerade die Frage des OP soll aber auch zu einem reinen jquery Fall anpassbar sein.