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

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