Wie konzentriere ich mit jquery das erste Element (Bearbeitungsfeld, Textbereich, Dropdown-Feld usw.) im Formular, wenn die Seite geladen wird?
Etwas wie:
document.forms[0].elements[0].focus();
aber mit jquery.
Eine weitere Anforderung ist, das erste Element nicht zu fokussieren, wenn das Formular class=”filter” hat.
Nickf
$('form:not(.filter) :input:visible:enabled:first').focus()
Dadurch wird das erste sichtbare Eingabeelement ausgewählt (<input />, <select>, <textarea>), die die Klasse nicht hat filter drin.
Zakaria
Für den Hintergrund habe ich das Skript in verwendet Rubin auf Schienen App. Nachdem Sie alle Ihre Antworten ausprobiert und alle herausgefunden haben funktioniert nichtBei einer Suche auf Google habe ich dieses Snippet gefunden funktioniert:
$(function() {
$("form:not(.filter) :input:visible:enabled:first").focus();
});
Es zeigt sich $('form :input:first') Übereinstimmung mit der versteckten Eingabe, die Schienen auf jedem Formular einfügen.
Dies scheint “select”-Steuerelemente zu ignorieren.
– CodeGrue
18. August 2010 um 19:09 Uhr
tvanfosson
Ich markiere mein ausgewähltes Element gerne mit einer Klasse und wähle nach Klasse aus, anstatt es der Reihenfolge der Elemente auf der Seite zu überlassen. Ich finde das viel einfacher, als zu versuchen, mich daran zu erinnern, meinen Algorithmus “Was ist das wahre erste Element” zu aktualisieren, wenn ich Elemente auswähle, die möglicherweise ausgeblendet sind oder nicht, vom Framework eingefügt werden können oder nicht, …
$(document).ready( function() {
$('input.js-initial-focus:first').focus(); // choose first just in case
});
Sehr guter Tipp, weil ich nicht zuerst auf Dropdown/Select-Tag fokussiert sein möchte, wenn darunter eine Textbox/Eingabe kommt. Also gebe ich der Textbox einen class=”initial-focus”. Darüber hinaus funktioniert die jquery-Lösung von Zakaria nicht mit einer asp.net mvc-Dropdownliste, da beim Öffnen des Dialogs ein Validierungsfehler auftritt: kein Element ausgewählt. Das stimmt aber nicht…
– Paskal
5. Januar 2013 um 22:27 Uhr
FWIW – Ich stelle jetzt Klassen, die für Verhaltensweisen verwendet werden, “js” voran, um sie von Klassen zu unterscheiden, die für das Styling verwendet werden. Es ist eine gute Praxis, Stilklassen nicht für Verhaltensweisen wiederzuverwenden, und dies hilft, dies zu verhindern.
– tvanfosson
6. Januar 2013 um 4:14 Uhr
Dies ist keine einzeilige Lösung, sondern berücksichtigt die real erstes Benutzereingabefeld (kann es oder
