jQuery: Wie finde ich den ersten sichtbaren Eingabe- / Auswahl- / Textbereich ohne Schaltflächen?

86

Ich habe es versucht

$(":input:not(input[type=button],input[type=submit],button):visible:first")

aber es findet nichts.

Was ist mein Fehler?

UPD: Ich führe dies auf $ (document) .load () aus

<script type="text/javascript">
$(window).load(function () {
  var aspForm  = $("form#aspnetForm");
  var firstInput = $(":input:not(input[type=button],input[type=submit],button):visible:first", aspForm);
  firstInput.focus();
});
</script>

und im Debug kann ich sehen, dass firstInput leer ist.

UPD2: Ich bin auf einer ASP.NET-Seite, die unter Sharepoint ausgeführt wird.

Ich habe bisher festgestellt, dass es für einige Elemente sie findet (für feste) und für einige nicht. :(

jquery input jquery-selectors Artem
quelle
Versuchen Sie "Eingabe" anstelle von ": Eingabe"?
Alec
Sollte gut funktionieren. Ihr Problem liegt woanders. Sind Sie nicht diese Ausführung vor der $(document)ist ready()?
BalusC
Haben Sie ein bestimmtes HTML, nach dem Sie suchen können?
Shiki
Vielleicht ist die erste Eingabe von type="hidden"? Klicken Sie mit der rechten Maustaste auf Seite und zeigen Sie die Quelle an. Das generierte HTML ist ebenfalls wichtig. Ohne es und eine richtige SSCCE schießt es im Dunkeln.
BalusC

Antworten:

164

Warum zielen Sie nicht einfach auf die gewünschten ( Demo )?

$('form').find('input[type=text],textarea,select').filter(':visible:first');

Bearbeiten

Oder verwenden Sie jQuery : input selector, um Formularnachkommen zu filtern.

$('form').find('*').filter(':input:visible:first');
Mottie
quelle
5
Kontrollkästchen? Radio? Passwort? Ganz zu schweigen von den vielen neuen HTML5-Eingabetypen.
BalusC
9
@BalusC $ ('form'). Find (': input'). Filter (': sichtbar: first')
Abe Petrillo
1
Dies funktioniert zwar bis zu einem gewissen Grad, ignoriert jedoch das tabindex-Attribut.
Eoleary
2
Kleiner Nitpick, aber nützliche Ergänzung: Anstelle von ': sichtbar: zuerst', ': sichtbar: aktiviert: zuerst' ist ein viel besserer Filter, da das oberste Element in einigen Fällen deaktiviert werden kann und der Fokus sich dort nicht verschieben kann.
Prahlad Yeri
1
@PrahladYeri Vielleicht auch schreibgeschützt ausschließen':input:visible:enabled:not([readonly]):first'
JustinStolle
13

Der JQuery-Code ist in Ordnung. Sie müssen im Ready-Handler und nicht im Fensterladeereignis ausführen.

<script type="text/javascript">
$(function(){
  var aspForm  = $("form#aspnetForm");
  var firstInput = $(":input:not(input[type=button],input[type=submit],button):visible:first", aspForm);
  firstInput.focus();
});
</script>

Aktualisieren

Ich habe es mit dem Beispiel von Karim79 versucht (danke für das Beispiel) und es funktioniert gut: http://jsfiddle.net/2sMfU/

PeterFromCologne
quelle
3
Danke @BalusC. Ich werde mich jetzt selbst erschießen. Ich hasse mich. Ich hätte die letzte Stunde damit verbringen können, mich nicht mit Arbeitscode zu beschäftigen. Ich hätte meine Hunde füttern und meine Küche putzen können. Es gibt viele Dinge, die ich hätte erreichen können. Jetzt habe ich nur noch Schmerzen. Auf Wiedersehen, für immer .... Und ja, ich sollte angehört haben.
Karim79
@ Karim: Rofl.
Gern geschehen
7

Dies ist meine Zusammenfassung der oben genannten und funktioniert perfekt für mich. Danke für die Information!

<script language='javascript' type='text/javascript'>
    $(document).ready(function () {
        var firstInput = $('form').find('input[type=text],input[type=password],input[type=radio],input[type=checkbox],textarea,select').filter(':visible:first');
        if (firstInput != null) {
            firstInput.focus();
        }
    });
</script>
Ben Foster
quelle
3

Dies ist eine Verbesserung gegenüber @ Mottie Antwort , weil , wie von jQuery 1.5.2 :textwählen inputElemente , die nicht angegeben haben typeAttribut (in diesem Fall type="text"wird angedeutet):

$('form').find(':text,textarea,select').filter(':visible:first')
Mike Slinn
quelle
1

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 ausgeblendeten Felder heraus
  • Filtern Sie nur nach aktivierten, sichtbaren Feldern
  • Wählen Sie den ersten 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('form#aspnetForm');

Element:

var el = $('form#aspnetForm');
focusFirst(el);
J Adam Rogers
quelle
0

Sie können unten Code versuchen ...

$(document).ready(function(){
    $('form').find('input[type=text],textarea,select').filter(':visible:first').focus();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<form>
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
    
<input type="submit" />
</form>
Erweitern Sie das Snippet

Mahbub
quelle