Zuverlässige Art der Abfrage für die "erste" Textbox mit jQuery

Question

Ich bin daran interessiert, ein sehr generisches Skript zu schreiben, das ich in meine Masterpage aufnehmen kann, die den Fokus auf das erste Textfeld auf der Seite geben würde, unabhängig vom Seitenlayout und Inhalt. Würde so etwas funktionieren?

$(function() { 
    $("input[type='text']:first").focus(); 
}); 

Ich mache mir Sorgen, dass „erste“ ist nur, was die erste Textbox ist es, was Indexierungsmechanismus jquery intern verwendet, anstatt die erste Textbox findet Verwendung (dh. Top-die meisten, am weitesten links auf dem Bildschirm)

Danke!

Answer 1

Wenn Sie nicht auf dem tabindex/dom Ordnung wissen müssen basiert, aber basierend auf CSS Position, dann könnte man so etwas wie dies versuchen:

var firstBox = null; 
$("input[type='text']").each(function() 
{ 
    if (firstBox == null) { 
     firstBox = $(this); 
    } 
    else { 
     if ($(this).offset().top < firstBox.offset().top || ($(this).offset().top == firstBox.offset().top && $(this).offset().left < firstBox.offset().left)) { 
      firstBox = $(this); 
     } 
    } 
}); 

Answer 2

Von dem, was ich weiß, was Sie geschrieben haben, ist ziemlich richtig. Der Selektor :first von jQuery verwendet das erste Element, über das er den DOM-Baum überspannt. Ich glaube, dass es hier keine proprietäre Methode gibt, nur eine einfache Baumdurchquerung.

Answer 3

Ihr Selektor dort ist richtig. Die Selektor-Engine von jQuery (Sizzle) verwendet CSS-Selektoren, und der CSS: erste Pseudosektor wählt immer den ersten im Dokumentfluss (d. h. den höchsten im Quellcode).

Answer 4

Wenn Sie CSS verwenden, um Dinge auf der Seite zu verschieben, dann müssen Sie wahrscheinlich jeden suchen und die Eingabe finden, die die kleinste, positive obere/linke Position hat. Wenn Ihre Eingaben in DOM-Reihenfolge sind, können Sie die Methode verwenden, die Sie in Ihrer Frage haben. Der einfachste Weg wäre, die gewünschte Eingabe mit einer Klasse zu versehen, damit Sie sie leicht finden können.

<input type="text" id="rightBox" style="float: right;" /> 
<input type="text" id="leftBox" class="chooseMe" /> 

... 

var firstText = $('input[type=text].chooseMe')[0]; 

firstText.focus();