jQuery Fokussiert dynamisch auf den ersten INPUT oder Textbereich

Lesezeit: 3 Minuten

Hier ist ein kniffliger Start in den Morgen.

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

Was ich versuche, ist jQuery, das, sobald ich das Formular geladen habe, das ausführen kann … Konzentrieren Sie sich auf die erste Eingabe oder den Textbereich, was auch immer es sein mag, dynamisch, damit ich keine if-Blöcke brauche.

Ideen?

  • Können Sie den Code posten, der Ihr neues Formular lädt?

    – Patricia

    26. Oktober 2010 um 17:18 Uhr

Das sollte reichen denke ich

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

  • @ user485680: Ich würde mich freuen, wenn Sie diese Antwort akzeptieren würden 🙂

    – Onkelborg

    26. Oktober 2010 um 17:20 Uhr

  • Was ist, wenn Sie keine ID angeben möchten und diese Arbeit systemweit auf allen Seiten mit Formularen haben möchten?

    – ctley79

    3. Februar 2014 um 19:33 Uhr

  • Entfernen Sie einfach #formId” und schon ist alles in Ordnung

    – Onkelborg

    23. Februar 2014 um 11:14 Uhr


  • versuche es auch $('input:visible:first').focus();

    – KingRider

    9. Juni 2015 um 20:25 Uhr

  • Antwort unten von Viliam ist besser.

    – James Westgate

    6. November 2017 um 9:59 Uhr

Hier ist es:

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

#form-id ist die ID des Formulars; :input wählt ein beliebiges Eingabe- und Textarea-Element aus; :enabled stellt sicher, dass die Eingabe bearbeitet werden kann; :visble sorgt dafür, dass das Element sichtbar ist; : zuerst ist offensichtlich

  • Oder noch besser, tun Sie es für jedes Formular und wenn Sie nicht möchten, dass der Submit-Button unten auf Ihrer Seite fokussiert wird (Seite wird zur Hälfte gescrollt): $(‘form :input:enabled:visible:first’) .not(‘:eingabe[type=button]: Eingabe[type=submit]: Eingabe[type=reset]’).Fokus();

    – RWC

    19. Dezember 2017 um 13:43 Uhr


Ein Teil Ihres Codes wäre nett, aber das sollte einfach sein.

Angenommen, Sie laden Ihr for in ein div, dessen ID Sie kennen….

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

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

nachdem Sie Ihr Formular geladen haben

  • Dies ist wieder einmal die Stärke von jQuery. dothis.dothat.thendothis Ich liebe es!

    – Justus Romijn

    26. Oktober 2010 um 17:25 Uhr

  • Gute Lösung. Aber wenn Ihr erstes Eingabeelement ein verstecktes Eingabefeld ist. Verwenden Sie stattdessen: $(‘#TheIdOfYourFormDiv’).find(‘input:text, textarea’).first().focus()

    – Dirk

    21. November 2015 um 12:52 Uhr

  • eine gute Beobachtung, wir würden wahrscheinlich auch die Zahl darin aufnehmen wollen.

    – Patricia

    24. November 2015 um 15:23 Uhr

Benutzer-Avatar
Tom Brüder

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

Das :input selector erfasst alle Eingabe-, Textarea-, Select- und Button-Elemente.

Benutzer-Avatar
Vivin Paliath

BEARBEITEN

Das ist eigentlich keine so tolle Lösung. Die Lösungen von Patricia und Onkelborg unten sind viel eleganter.

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

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

else {
  $firstInput.focus();
}

  • hm funktioniert nicht. Könnte es daran liegen, dass ich AJAX verwende, um das Formular in die Seite einzufügen?

    – Der Ausgang

    26. Oktober 2010 um 17:15 Uhr

  • @ user485680: Nein, AJAX hat nichts damit zu tun. Haben Sie “formId” durch die ID des Formulars ersetzt?

    – Onkelborg

    26. Oktober 2010 um 17:16 Uhr

Benutzer-Avatar
Nalan Madheswaran

Es funktioniert für mich im Ladeereignis.

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

  • hm funktioniert nicht. Könnte es daran liegen, dass ich AJAX verwende, um das Formular in die Seite einzufügen?

    – Der Ausgang

    26. Oktober 2010 um 17:15 Uhr

  • @ user485680: Nein, AJAX hat nichts damit zu tun. Haben Sie “formId” durch die ID des Formulars ersetzt?

    – Onkelborg

    26. Oktober 2010 um 17:16 Uhr

Benutzer-Avatar
J Adam Rogers

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

  • Holen Sie sich alle Eingaben, Auswahlen und Textbereiche
  • Filtern Sie alle Schaltflächen und versteckten Felder heraus
  • filtern Sie nur nach aktivierten, sichtbaren Feldern
  • wählen Sie die erste aus
  • Fokussieren Sie das ausgewählte Feld

Der Code:

function focusFirst(parent) {
    $(parent).find('input, textarea, select')
        .not('input[type=hidden],input[type=button],input[type=submit],input[type=reset],input[type=image],button')
        .filter(':enabled:visible:first')
        .focus();
}

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

Wähler:

focusFirst('#parentId');

Element:

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

1180700cookie-checkjQuery Fokussiert dynamisch auf den ersten INPUT oder Textbereich

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy